@font-face {
  font-family: "SlideYouran";
  src: url("饲界-开始界面/assets/fonts/slideyouran-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #080608;
  --panel: #151014;
  --panel-soft: #211821;
  --text: #fff7ea;
  --muted: #b9a99d;
  --line: rgba(255, 230, 184, 0.13);
  --gold: #f1cf91;
  --gold-bright: #ffe7b5;
  --parchment: #fff2d6;
  --rose: #d48a96;
  --cyan: #9fd5ff;
  --a: #9fd5ff;   /* 角色0 / 主角A 色 */
  --b: #ffb3c8;   /* 角色1 / 主角B 色 */
  --ink: #080608;
  --wine: #2a0d14;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  --surface-canvas: rgba(5, 4, 6, 0.92);
  --surface-sidebar: rgba(8, 5, 8, 0.92);
  --surface-rail: rgba(13, 10, 13, 0.74);
  --surface-card: rgba(14, 11, 14, 0.96);
  --surface-card-hover: rgba(18, 13, 17, 0.98);
  --border-hairline: rgba(241, 207, 145, 0.14);
  --border-card: rgba(241, 207, 145, 0.22);
  --border-card-hover: rgba(255, 231, 181, 0.52);
  --font-ui: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "SlideYouran", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --font-dialogue: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --font-serif: "Songti SC", "Noto Serif SC", serif;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --rail-gap: clamp(28px, 3.4vw, 54px);
  --card-radius: 14px;
  --sijie-bg:
    radial-gradient(circle at 72% 16%, rgba(241, 207, 145, 0.15), transparent 25rem),
    radial-gradient(circle at 34% 102%, rgba(106, 24, 38, 0.56), transparent 38rem),
    linear-gradient(180deg, #050406 0%, #08070a 48%, #1a0810 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sijie-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
}
button, a, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }

#start-view[hidden],
#app-shell[hidden] { display: none !important; }

body.start-experience-active { overflow: hidden; }

.app-shell {
  display: grid; min-height: 100vh; grid-template-columns: 276px minmax(0, 1fr);
  transition: grid-template-columns 260ms ease;
}
.app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }

/* ---------------- 侧边栏 ---------------- */
.sidebar {
  position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column;
  gap: 28px; border-right: 1px solid var(--line); background: rgba(12, 13, 17, 0.92);
  overflow: visible; padding: 24px 18px; backdrop-filter: blur(20px);
  transform: translateX(0);
  opacity: 1;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, border-color 200ms ease;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 6px; }
.brand-copy, .nav-label {
  white-space: nowrap; transition: opacity 140ms ease;
}
.brand-mark {
  display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center;
  border: 1px solid rgba(245, 199, 106, 0.5); border-radius: 8px;
  background: linear-gradient(145deg, rgba(245, 199, 106, 0.22), rgba(231, 154, 154, 0.14));
}
.brand-mark img { width: 28px; height: 28px; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; line-height: 1.2; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.nav-stack { display: grid; gap: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; border-radius: 8px;
  width: 100%; padding: 0 12px; color: #d8d2cb; background: transparent; text-align: left;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.nav-item:hover,
.nav-item:focus-visible {
  background: rgba(245, 199, 106, 0.12);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.24);
}
.nav-item:focus-visible { outline: none; }
.sijie-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: var(--gold);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 242, 214, 0.28), transparent 42%),
    rgba(245, 199, 106, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(245, 199, 106, 0.18),
    0 0 14px rgba(245, 199, 106, 0.08);
}
.nav-icon .sijie-icon {
  width: 15px;
  height: 15px;
}
.nav-icon-edit {
  background: rgba(245, 199, 106, 0.16);
  color: var(--gold);
}
.nav-icon-account {
  background:
    radial-gradient(circle at 32% 22%, rgba(205, 234, 255, 0.30), transparent 42%),
    rgba(146, 213, 255, 0.14);
  color: rgba(185, 224, 255, 0.92);
}
.account-nav.is-authenticated .nav-icon-account {
  background: rgba(127, 220, 160, 0.16);
}
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 13px; font-weight: 700; }
.sidebar-toggle {
  position: absolute; z-index: 3; top: 32px; right: 32px;
  display: grid; width: 30px; height: 30px; place-items: center;
  border: 1px solid rgba(245, 199, 106, 0.3); border-radius: 50%;
  background: #171922; padding: 0; color: var(--muted);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
  transition: color 160ms ease, background 160ms ease;
}
.sidebar-toggle:hover { background: #242632; color: var(--gold); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sidebar-toggle-icon {
  display: grid; width: 18px; height: 18px; place-items: center;
  font-size: 0; line-height: 0;
}
.sidebar-toggle-icon::before {
  content: none;
}
.sidebar-toggle-icon .sijie-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.sidebar-peek-toggle {
  position: fixed;
  z-index: 20;
  top: 32px;
  left: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(245, 199, 106, 0.48);
  border-radius: 999px;
  background: rgba(18, 19, 25, 0.82);
  color: var(--gold);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.sidebar-peek-toggle:hover {
  transform: translateX(2px);
  border-color: rgba(245, 199, 106, 0.74);
  background: rgba(34, 29, 22, 0.88);
}
.sidebar-peek-toggle:active { transform: translateX(2px) scale(0.96); }
.sidebar-peek-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sidebar-peek-toggle span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}
.sidebar-peek-toggle .sijie-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
}
.sidebar-peek-toggle[hidden] { display: none; }
.app-shell.sidebar-collapsed .sidebar {
  transform: translateX(calc(-100% - 22px));
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
}
body.game-mode {
  overflow: auto;
  background: var(--sijie-bg);
  background-attachment: fixed;
}
body.game-mode .app-shell {
  grid-template-columns: 0 minmax(0, 1fr);
  min-height: 100dvh;
}
body.game-mode .sidebar {
  transform: translateX(calc(-100% - 22px));
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
}
body.game-mode .sidebar-peek-toggle { display: none; }

/* ---------------- 内容区 ---------------- */
.content { min-width: 0; padding: 24px clamp(18px, 5vw, 64px) 64px; }
body.game-mode .content { padding: 0; }
.page-view { display: none; }
.page-view.active { display: block; }

/* 探索页：作品展馆直接横向滑动，避免竖向滚动驱动横移的反直觉手感 */
.showcase-scroll {
  --showcase-x: 0px;
  --showcase-progress: 0;
  --showcase-cover-progress: 0;
  --showcase-bg-x: 0px;
  --showcase-copy-opacity: 1;
  position: relative;
  min-height: calc(100dvh + 24px);
  margin: -24px calc(clamp(18px, 5vw, 64px) * -1) 0;
}
.showcase-stage {
  position: relative;
  top: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--sijie-bg);
  isolation: isolate;
}
.showcase-stage::before,
.showcase-stage::after,
.showcase-field {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}
.showcase-stage::before {
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.74) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(245,199,106,0.54) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(146,213,255,0.48) 0 1px, transparent 1.6px);
  background-position:
    calc(var(--showcase-bg-x) * 0.32) 22px,
    calc(var(--showcase-bg-x) * 0.18) 80px,
    calc(var(--showcase-bg-x) * 0.10) 140px;
  background-size: 270px 190px, 410px 260px, 610px 360px;
  opacity: 0.32;
}
.showcase-stage::after {
  z-index: 1;
  background:
    radial-gradient(90rem 26rem at 45% 100%, rgba(86, 26, 35, 0.72), transparent 68%),
    linear-gradient(180deg, rgba(3,4,7,0.18), transparent 40%, rgba(3,4,7,0.28));
}
.showcase-field {
  z-index: 1;
  transform: translate3d(calc(var(--showcase-bg-x) * 0.42), 0, 0);
  opacity: 0.72;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(245, 154, 176, 0.20) 58.2% 58.6%, transparent 58.8%),
    radial-gradient(14rem 2rem at 54% 54%, rgba(245, 154, 176, 0.28), transparent 72%),
    radial-gradient(13rem 2.6rem at 40% 62%, rgba(245, 199, 106, 0.16), transparent 76%);
  filter: blur(1px);
  mix-blend-mode: screen;
}
.showcase-magic-rings {
  --rings-x: 0;
  --rings-y: 0;
  --rings-hover: 0;
  --rings-burst: 0;
  position: absolute;
  z-index: 2;
  inset: 6vh auto auto 40vw;
  width: clamp(360px, 42vw, 740px);
  aspect-ratio: 1;
  color: rgba(241, 207, 145, 0.74);
  pointer-events: none;
  opacity: calc(0.30 + var(--rings-hover) * 0.11 + var(--rings-burst) * 0.20);
  transform:
    translate3d(calc(var(--rings-x) * 22px), calc(var(--rings-y) * 16px), 0)
    scale(calc(1 + var(--rings-hover) * 0.035 + var(--rings-burst) * 0.055))
    rotate(-9deg);
  transform-origin: center;
  filter: blur(0.15px) drop-shadow(0 0 24px rgba(241, 207, 145, 0.12));
  mix-blend-mode: screen;
  transition: opacity 180ms ease, transform 180ms ease;
}
.showcase-magic-rings span {
  position: absolute;
  inset: calc(var(--ring-i, 0) * 7.6%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.86) rotate(calc(var(--ring-i, 0) * 18deg));
  animation: magicRingCycle calc(7.2s / var(--ring-speed, 1)) linear infinite;
  animation-delay: calc(var(--ring-i, 0) * -0.68s);
}
.showcase-magic-rings span::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    conic-gradient(
      from calc(var(--ring-i, 0) * 27deg),
      transparent 0deg 24deg,
      rgba(241, 207, 145, 0.74) 44deg 86deg,
      transparent 104deg 162deg,
      rgba(255, 242, 214, 0.46) 184deg 222deg,
      transparent 246deg 306deg,
      rgba(212, 138, 150, 0.28) 326deg 348deg,
      transparent 356deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-line, 2px)), #000 calc(100% - var(--ring-line, 2px) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-line, 2px)), #000 calc(100% - var(--ring-line, 2px) + 1px));
}
.showcase-magic-rings span::after {
  position: absolute;
  inset: 18%;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 48% 50%, rgba(255, 242, 214, 0.24), transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(241, 207, 145, 0.20), transparent 2px);
  opacity: calc(0.38 + var(--rings-burst) * 0.36);
}
.showcase-magic-rings span:nth-child(1) { --ring-i: 0; --ring-speed: 1.05; --ring-line: 1.5px; }
.showcase-magic-rings span:nth-child(2) { --ring-i: 1; --ring-speed: 0.96; --ring-line: 1.8px; }
.showcase-magic-rings span:nth-child(3) { --ring-i: 2; --ring-speed: 1.12; --ring-line: 2px; }
.showcase-magic-rings span:nth-child(4) { --ring-i: 3; --ring-speed: 0.9; --ring-line: 1.6px; }
.showcase-magic-rings span:nth-child(5) { --ring-i: 4; --ring-speed: 1.18; --ring-line: 1.3px; }
.showcase-magic-rings span:nth-child(6) { --ring-i: 5; --ring-speed: 0.84; --ring-line: 1.2px; }
@keyframes magicRingCycle {
  0% {
    opacity: 0;
    transform: scale(0.78) rotate(calc(var(--ring-i, 0) * 18deg));
    filter: blur(0.4px);
  }
  18% {
    opacity: calc(0.36 + var(--rings-burst) * 0.34);
  }
  58% {
    opacity: calc(0.20 + var(--rings-hover) * 0.16 + var(--rings-burst) * 0.24);
  }
  100% {
    opacity: 0;
    transform: scale(calc(1.18 + var(--rings-burst) * 0.12)) rotate(calc(var(--ring-i, 0) * 18deg + 54deg));
    filter: blur(1.4px);
  }
}
.showcase-copy {
  display: none;
  opacity: var(--showcase-copy-opacity);
  transform:
    translate3d(calc(var(--showcase-cover-progress) * -54px), 0, 0)
    scale(calc(1 - var(--showcase-cover-progress) * 0.08));
  filter:
    blur(calc(var(--showcase-cover-progress) * 16px))
    brightness(calc(1 - var(--showcase-cover-progress) * 0.46));
  transition:
    opacity 90ms ease,
    transform 220ms ease,
    filter 220ms ease;
  pointer-events: none;
}
.showcase-copy .eyebrow { margin-bottom: 6px; font-size: 13px; }
.showcase-copy h1 {
  margin: 0;
  color: #fffaf2;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 70px);
  line-height: 0.88;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
}
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; }
.section-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1; }
.section-heading p { display: none; }
.showcase-track-wrap {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 50%;
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
  padding-block: 24px;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  perspective: 1200px;
  transform-style: preserve-3d;
  transform: translateY(-50%);
  isolation: isolate;
}
.showcase-track-wrap::-webkit-scrollbar { height: 0; }
.works-grid.showcase-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(34px, 5vw, 76px);
  width: max-content;
  padding: 0 10vw;
  transform: none;
  will-change: auto;
}
.showcase-meter {
  position: absolute;
  z-index: 5;
  left: clamp(22px, 6vw, 82px);
  right: clamp(22px, 6vw, 82px);
  top: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.showcase-meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--showcase-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold), var(--rose), rgba(146, 213, 255, 0.85));
}
.showcase-hint {
  position: absolute;
  z-index: 5;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(18px, 4vh, 34px);
  margin: 0;
  color: rgba(246, 242, 234, 0.42);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  writing-mode: horizontal-tb;
}

.work-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; width: clamp(360px, 30vw, 500px); max-width: 500px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  position: relative; z-index: 31;
  background: rgba(21, 23, 32, 0.98); cursor: pointer; box-shadow: var(--shadow);
  transform-origin: center bottom;
  transition: transform 260ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.showcase-card { flex: 0 0 clamp(360px, 30vw, 500px); }
.cover-link { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #11131a; }
.cover-link::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent 52%, rgba(0,0,0,0.22));
  pointer-events: none;
}
.cover-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease, filter 420ms ease; }
.work-card:hover {
  border-color: rgba(245, 199, 106, 0.40);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(245, 199, 106, 0.12);
}
.work-card:hover { transform: translateY(-5px); }
.work-card:hover img { transform: scale(1.045); filter: saturate(1.1) contrast(1.04); }
.work-badge {
  position: absolute; top: 14px; left: 14px; border-radius: 8px; background: rgba(12, 13, 17, 0.76);
  padding: 7px 10px; color: var(--gold); font-size: 12px; font-weight: 800; backdrop-filter: blur(14px);
}
.work-body { padding: 18px; min-height: 200px; }
.work-title-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; }
.work-title-row h3 { margin: 0; font-size: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-title-row span { flex: 0 0 auto; border-radius: 8px; background: rgba(245, 169, 192, 0.14); padding: 6px 9px; color: var(--b); font-size: 12px; font-weight: 700; }
.work-body p { margin: 12px 0 16px; color: #d5cfca; line-height: 1.7; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-row span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--muted); font-size: 12px; }
.meta-row.sub { margin-top: 10px; }
.work-play-count {
  margin-top: auto;
  padding-top: 14px;
  color: rgba(246, 242, 234, 0.48);
  font-size: 12px;
  line-height: 1.4;
}
.showcase-more-card {
  display: grid;
  place-items: center;
  width: clamp(420px, 36vw, 600px);
  min-height: clamp(520px, 62vh, 680px);
  padding: clamp(22px, 3vw, 42px);
  margin-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(246, 242, 234, 0.84);
  text-align: center;
  cursor: default;
}
.showcase-more-inner {
  display: grid;
  place-items: center;
  gap: 18px;
  width: min(100%, 480px);
  min-height: min(82%, 520px);
  padding: clamp(34px, 5vw, 70px) clamp(24px, 4vw, 48px);
  border: 1px solid rgba(241, 207, 145, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(241, 207, 145, 0.09), transparent 46%),
    linear-gradient(180deg, rgba(255, 242, 214, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(13, 10, 13, 0.76);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px);
}
.showcase-more-card p {
  margin: 0;
  color: rgba(245, 199, 106, 0.88);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.showcase-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(82%, 360px);
  min-height: 60px;
  overflow: hidden;
  border: 1px solid rgba(245, 199, 106, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(245, 199, 106, 0.20), rgba(231, 154, 154, 0.16)),
    rgba(10, 10, 14, 0.78);
  color: #fff6df;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.showcase-more-button:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 199, 106, 0.72);
  background:
    linear-gradient(90deg, rgba(245, 199, 106, 0.28), rgba(231, 154, 154, 0.20)),
    rgba(10, 10, 14, 0.86);
}
.showcase-more-button:active { transform: translateY(0) scale(0.99); }
.showcase-more-button i {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(245, 199, 106, 0.38);
  border-radius: 50%;
  background: rgba(245, 199, 106, 0.10);
  color: var(--gold);
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}
.showcase-more-button b {
  min-width: 0;
  padding: 0;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.1;
}
.showcase-more-card small { color: rgba(246, 242, 234, 0.52); font-size: 14px; }

.all-works-section {
  margin: 0 calc(clamp(18px, 5vw, 64px) * -1) -64px;
  padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 82px) clamp(58px, 8vw, 96px);
  background: var(--sijie-bg);
  color: var(--text);
}
.all-works-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  max-width: 1480px;
  margin: 0 auto 28px;
}
.all-works-heading .eyebrow { color: var(--gold); }
.all-works-heading h2 {
  margin: 0;
  color: #fffaf2;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
}
.all-works-heading > p {
  margin: 0 0 5px;
  max-width: 24rem;
  color: rgba(246, 242, 234, 0.62);
  line-height: 1.6;
}
.all-works-grid {
  display: grid;
  max-width: 1480px;
  margin: 0 auto;
  gap: 26px 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.all-work-card {
  width: auto;
  max-width: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(21, 23, 32, 0.92);
  color: var(--text);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}
.all-work-card .cover-link { aspect-ratio: 16 / 9; }
.all-work-card .work-body { min-height: 156px; padding: 18px 20px 20px; }
.all-work-card .work-title-row h3 { color: #fffaf2; font-size: 22px; font-weight: 700; }
.all-work-card .work-title-row span { background: rgba(245, 169, 192, 0.14); color: var(--b); }
.all-work-card .work-body p { color: rgba(246, 242, 234, 0.72); line-height: 1.65; }
.all-work-card .meta-row span {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(246, 242, 234, 0.58);
}
.all-work-card .meta-row.sub span {
  background: transparent;
  border: 0;
  padding-left: 0;
  color: rgba(246, 242, 234, 0.48);
}
.all-work-card .work-play-count,
.showcase-featured-card .work-play-count {
  margin-top: auto;
  padding-top: 16px;
  color: rgba(246, 242, 234, 0.48);
  font-size: 12px;
  line-height: 1.4;
}
.all-work-card .work-action-row,
.showcase-featured-card .work-action-row {
  margin-top: 0;
}

/* ---------------- 详情页 ---------------- */
.detail-layout {
  display: grid; align-items: start; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(440px, 1fr) minmax(320px, 420px); padding-top: clamp(28px, 5vw, 50px);
}
.play-panel { display: grid; justify-items: center; gap: clamp(24px, 3vw, 36px); }
.detail-cover {
  position: relative; width: min(100%, 820px); aspect-ratio: 16 / 8.8; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: #11131a; box-shadow: var(--shadow);
}
.detail-cover::after {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 36%), linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 42%);
}
.detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crumbs {
  position: absolute; z-index: 1; top: 22px; left: 22px; display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.64);
}

/* 角色选择 */
.role-picker { display: grid; align-items: stretch; width: min(100%, 820px); gap: 14px; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
.role-col {
  display: grid; align-content: start; gap: 10px; border-radius: 12px; padding: 12px 12px 16px;
  background: linear-gradient(180deg, rgba(32, 29, 28, 0.9), rgba(18, 15, 16, 0.94));
  color: #fff7e7; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(245, 199, 106, 0.26);
}
.role-col:first-child { border-color: rgba(146, 213, 255, 0.5); }
.role-col:last-child { border-color: rgba(245, 169, 192, 0.55); }
.role-slot { color: rgba(245, 199, 106, 0.82); font-size: 12px; font-weight: 800; }
.role-tag { font-size: 15px; line-height: 1.2; color: #fff2d8; font-weight: 800; opacity: 0.96; }
.role-name-editor { position: relative; min-width: 0; }
.role-input {
  display: block;
  width: 100%; min-height: 52px; border: 1px solid rgba(245, 199, 106, 0.20); border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); padding: 0 12px; color: #fffaf2; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1; outline: none;
}
.role-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 199, 106, 0.25); }
.role-edit-hint {
  position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden;
  padding: 0 13px; pointer-events: none; white-space: pre;
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1;
}
.role-edit-measure { flex: 0 0 auto; color: transparent; }
.role-edit-caret {
  width: 2px; height: 0.78em; flex: 0 0 auto; margin-left: 3px; border-radius: 999px;
  background: #b7782f; box-shadow: 0 0 8px rgba(183, 120, 47, 0.55);
  animation: role-edit-caret-blink 1.05s steps(1, end) infinite;
}
.role-name-editor:focus-within .role-edit-hint { display: none; }
@keyframes role-edit-caret-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .role-edit-caret { animation: none; }
  .showcase-magic-rings span,
  .showcase-field,
  .dm-track,
  .dm-bubble {
    animation: none;
  }
  .showcase-magic-rings {
    transform: none;
    opacity: 0.16;
  }
}
.role-mini { color: rgba(246, 242, 234, 0.62); font-size: 12px; line-height: 1.5; }
.swap-btn {
  display: grid; justify-items: center; align-content: center; gap: 4px; border-radius: 12px;
  background: rgba(245, 199, 106, 0.12); color: var(--gold); font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.34);
}
.swap-btn span { font-size: 12px; }
.swap-btn strong { font-size: 30px; line-height: 0.9; }

.seg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seg {
  min-height: 38px; border-radius: 8px; padding: 0 16px; background: var(--panel-soft);
  color: #d8d2cb; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line);
}
.seg.active { background: rgba(245, 199, 106, 0.16); color: var(--text); box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.5); }

.start-button {
  min-height: 74px; min-width: min(100%, 380px); border: 6px solid #527aff; border-radius: 20px;
  background: #dfe7ff; color: #20242c; font-size: clamp(28px, 4vw, 42px); font-weight: 600;
  box-shadow: 0 16px 38px rgba(82, 122, 255, 0.28); transition: transform 120ms ease;
}
.start-button:active { transform: scale(0.98); }

/* 故事面板 */
.story-panel {
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  background: rgba(246, 242, 234, 0.96); color: #2c2824; box-shadow: var(--shadow);
}
.story-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.story-info { padding: 22px; }
.story-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.story-title-row h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.story-title-row p { margin: 8px 0 0; color: #6f6760; font-weight: 700; }
.follow-button { min-height: 34px; border-radius: 17px; background: #bd8558; padding: 0 14px; color: #fff; font-size: 14px; font-weight: 800; }
.story-summary { margin: 16px 0 0; color: #5f5954; line-height: 1.7; }
.story-worldnote { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: #efece6; color: #6a625b; font-size: 13px; line-height: 1.65; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-row span { border-radius: 8px; background: #ece9e4; padding: 7px 10px; color: #5f5954; font-size: 12px; font-weight: 800; }

@media (min-width: 901px) {
  #detail-view {
    height: calc(100dvh - 88px);
    overflow: hidden;
  }
  #detail-view .detail-layout {
    height: 100%;
    min-height: 0;
    padding-top: clamp(12px, 2vh, 24px);
    padding-bottom: clamp(12px, 2vh, 24px);
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    gap: clamp(20px, 3vw, 44px);
  }
  #detail-view .play-panel {
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: clamp(10px, 1.5vh, 18px);
  }
  #detail-view .detail-cover,
  #detail-view .role-picker {
    width: min(100%, 820px);
    min-height: 0;
  }
  #detail-view .detail-cover {
    height: 100%;
    aspect-ratio: auto;
  }
  #detail-view .role-picker { height: auto; }
  #detail-view .role-col {
    min-height: 0;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    padding: 9px 10px 11px;
  }
  #detail-view .role-mini {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #detail-view .role-input {
    min-height: 42px;
    font-size: clamp(20px, 2vw, 28px);
  }
  #detail-view .start-button {
    min-height: 52px;
    min-width: min(100%, 320px);
    border-width: 4px;
    border-radius: 14px;
    font-size: clamp(24px, 2.5vw, 32px);
  }
  #detail-view .story-panel {
    display: grid;
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(150px, 34%) minmax(0, 1fr);
  }
  #detail-view .story-cover {
    height: 100%;
    aspect-ratio: auto;
  }
  #detail-view .story-info {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* ---------------- 游玩界面 ---------------- */
.game-layout { display: grid; place-items: center; padding: clamp(16px, 3vw, 40px) 0; }
body.game-mode .game-layout {
  min-height: 100dvh;
  align-items: start;
  padding: clamp(10px, 1.2vw, 18px);
}
.game-window {
  display: grid; width: min(100%, 1080px); gap: 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    var(--sijie-bg);
  padding: clamp(14px, 2vw, 22px); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(245, 199, 106, 0.08);
}
body.game-mode .game-window {
  width: min(calc(100vw - clamp(20px, 2.4vw, 36px)), 148dvh, 1880px);
  min-height: auto;
  border: 1px solid rgba(245, 199, 106, 0.16);
  border-radius: 10px;
  box-shadow: 0 24px 78px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(245, 199, 106, 0.07);
}
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tool-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-btns button {
  min-height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); padding: 0 13px;
  color: #e9e4d8; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.tool-btns button:hover { background: rgba(245, 199, 106, 0.14); }
.tool-btns .home-return-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  padding: 0;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 34%, rgba(245, 199, 106, 0.18), transparent 52%),
    rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(245, 199, 106, 0.44),
    0 0 16px rgba(245, 199, 106, 0.1);
}
.tool-btns .home-return-btn span {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.tool-btns .home-return-btn:hover,
.tool-btns .home-return-btn:focus-visible {
  background: rgba(245, 199, 106, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(245, 199, 106, 0.72),
    0 0 20px rgba(245, 199, 106, 0.22);
  outline: none;
}
#btn-audio.on { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.5); }

/* 环境设置弹窗 */
.audio-body { display: grid; gap: 18px; }
.audio-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.audio-row span { font-weight: 700; color: #d8d2cb; }
.audio-row input[type="range"] { flex: 1; max-width: 60%; accent-color: var(--gold); }
.audio-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.audio-row output {
  min-width: 44px;
  color: rgba(255, 242, 214, 0.62);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

/* 生成中「点点点」动画（VN 文本框落笔提示用） */
.dots i { animation: blink 1.2s infinite; opacity: 0.3; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* 选项区 */
.choice-area { display: grid; gap: 10px; }
.choice-btn {
  display: flex; align-items: center; gap: 12px; min-height: 54px; width: 100%; text-align: left;
  border-radius: 10px; padding: 10px 16px; color: #f7efe0; font-size: clamp(15px, 1.7vw, 18px); font-weight: 600;
  background: linear-gradient(90deg, rgba(245, 199, 106, 0.12), rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: all 140ms ease;
}
.choice-btn:hover { box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.5); transform: translateX(2px); }
.ch-key { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(245, 199, 106, 0.2); color: var(--gold); font-weight: 900; font-size: 13px; }
/* 「继续▷」回合按钮：非抉择点、推进同一场景 */
.choice-btn.continue-btn { justify-content: center; color: #e9f3ff; background: linear-gradient(90deg, rgba(146,213,255,0.14), rgba(255,255,255,0.04)); box-shadow: inset 0 0 0 1px rgba(146,213,255,0.28); font-weight: 700; }
.choice-btn.continue-btn:hover { box-shadow: inset 0 0 0 1px rgba(146,213,255,0.55); }
.choice-btn.continue-btn .ch-key { background: rgba(146,213,255,0.22); color: var(--cyan); }
.ended-banner { padding: 16px; border-radius: 10px; text-align: center; color: var(--gold); background: rgba(245, 199, 106, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 199, 106, 0.3); }
.err-banner { padding: 14px 16px; border-radius: 10px; background: rgba(231, 84, 68, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 123, 104, 0.35); }
.err-banner p { margin: 0 0 10px; color: #ffb3a6; }
.err-actions { display: flex; gap: 8px; }
.err-actions button { min-height: 38px; border-radius: 8px; padding: 0 16px; background: var(--gold); color: #17110b; font-weight: 800; }
.err-actions .ghost { background: rgba(255, 255, 255, 0.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* 自由输入 */
.story-input { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.story-input.disabled { opacity: 0.5; pointer-events: none; }
.story-input input {
  min-width: 0; min-height: 54px; border: 1px solid rgba(245, 199, 106, 0.3); border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); padding: 0 16px; color: #fff; font-size: 16px; outline: none;
}
.story-input input::placeholder { color: rgba(224, 219, 211, 0.5); }
.story-input input:focus { border-color: rgba(245, 199, 106, 0.7); box-shadow: 0 0 0 3px rgba(245, 199, 106, 0.14); }
.story-input button { min-width: 92px; min-height: 54px; border-radius: 10px; background: var(--gold); color: #17110b; font-weight: 900; }

/* ---------------- 弹窗 ---------------- */
html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.modal-open { touch-action: none; }
body.modal-open .modal.open,
body.modal-open .modal.open .modal-body { touch-action: pan-y; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 40; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.98);
  width: min(92vw, 540px); max-height: 86vh; overflow: hidden; display: none; flex-direction: column;
  border-radius: 14px; background: var(--panel); box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
.modal.sm { width: min(92vw, 420px); }
.modal.open { display: flex; animation: pop 200ms ease both; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.modal h3 { margin: 0; font-size: 19px; }
.modal > p { margin: 14px 24px 0; color: var(--muted); line-height: 1.6; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head button { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 15px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-actions { display: flex; gap: 10px; padding: 18px 24px 22px; }
.modal-actions button { flex: 1; min-height: 46px; border-radius: 10px; font-weight: 800; }
.modal-actions .primary, .cfg-body .primary { background: var(--gold); color: #17110b; }
.modal-actions .ghost, .cfg-body .ghost { background: rgba(255, 255, 255, 0.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.modal.resume-modal {
  width: min(92vw, 620px);
  text-align: center;
  background:
    radial-gradient(circle at 30% 0%, rgba(245, 199, 106, 0.10), transparent 18rem),
    rgba(21, 23, 32, 0.96);
}
.resume-modal h3 {
  margin: 0;
  padding: 28px 28px 0;
  color: #fffaf2;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}
.resume-modal > p {
  margin: 16px auto 0;
  max-width: 28rem;
  color: rgba(246, 242, 234, 0.68);
  font-size: clamp(15px, 1.6vw, 18px);
}
.resume-modal .modal-actions {
  justify-content: center;
  padding: 24px 28px 30px;
}
.resume-modal .modal-actions button {
  min-height: 58px;
  font-size: clamp(15px, 1.7vw, 19px);
}
.modal.synopsis-modal {
  width: min(88vw, 860px);
  max-height: min(760px, 92dvh);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 0%, rgba(245, 199, 106, 0.10), transparent 18rem),
    rgba(21, 23, 32, 0.98);
}
.synopsis-modal .modal-head {
  padding: 16px 20px;
}
.synopsis-modal .modal-head h3 {
  color: #fffaf2;
  font-size: 18px;
  letter-spacing: 0;
}
.synopsis-modal .modal-body {
  padding: 18px 24px 22px;
  overflow: hidden;
}
.synopsis-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.synopsis-cover {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 7.2;
  overflow: hidden;
  border-radius: 10px;
  background: #0d0f16;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.synopsis-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.synopsis-meta {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.synopsis-meta h4 {
  margin: 0;
  color: #fffaf2;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.45;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.synopsis-meta p {
  margin: 7px 0 0;
  color: rgba(246, 242, 234, 0.56);
  font-size: 13px;
  font-weight: 700;
}
.synopsis-type {
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(245, 169, 192, 0.14);
  max-width: 44%;
  padding: 7px 10px;
  color: var(--b);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}
.synopsis-text {
  margin: 0;
  color: rgba(246, 242, 234, 0.76);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.synopsis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.synopsis-tags span {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 7px 10px;
  color: rgba(246, 242, 234, 0.62);
  font-size: 12px;
  font-weight: 800;
}

/* 好感弹窗 */
.aff-card { padding: 16px; border-radius: 10px; background: var(--panel-soft); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 12px; }
.aff-top { display: flex; align-items: baseline; gap: 8px; }
.aff-top strong { font-size: 17px; }
.aff-top span { color: var(--muted); font-size: 12px; }
.aff-band { margin: 8px 0; font-size: 20px; font-weight: 800; color: var(--gold); }
.aff-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.aff-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--a), #cdeaff); }
.aff-bar.b i { background: linear-gradient(90deg, var(--b), #ffd9e6); }
.aff-hint { margin: 10px 0 0; color: #cfc9c0; font-size: 13px; line-height: 1.6; }
.aff-raw { margin-top: 8px; color: var(--muted); font-size: 13px; }
.aff-raw summary { cursor: pointer; }
.raw-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin-top: 10px; }
.raw-grid span { color: var(--muted); }
.raw-grid b { color: var(--text); text-align: right; }

/* 历史弹窗 */
.modal .seg-row { padding: 14px 20px 0; }
.history-body { display: grid; gap: 10px; }
.h-row { display: grid; gap: 4px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; text-align: left; }
.h-row.h-a { box-shadow: inset 3px 0 0 var(--a); }
.h-row.h-b { box-shadow: inset 3px 0 0 var(--b); }
.history-jump {
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.history-jump:hover,
.history-jump:focus-visible {
  background: rgba(245, 199, 106, 0.10);
  box-shadow:
    inset 3px 0 0 var(--gold),
    inset 0 0 0 1px rgba(245, 199, 106, 0.26);
  transform: translateX(2px);
  outline: none;
}
.h-who { font-size: 12px; font-weight: 800; color: var(--muted); }
.h-row .h-text,
.h-row p { margin: 0; line-height: 1.6; color: #ddd6cc; white-space: pre-wrap; }
.empty { color: var(--muted); text-align: center; }

/* 设置弹窗 */
.cfg-body { display: grid; gap: 14px; }
.cfg-field { display: grid; gap: 6px; }
.cfg-field > span { font-size: 13px; font-weight: 700; color: #d8d2cb; }
.cfg-field input[type="text"], .cfg-field input[type="email"], .cfg-field input[type="password"], .cfg-field input[type="number"], .cfg-field select {
  min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.06);
  padding: 0 13px; color: var(--text); outline: none;
}
.cfg-field input:focus, .cfg-field select:focus { border-color: rgba(245, 199, 106, 0.6); }
.cfg-field em { color: var(--muted); font-size: 12px; font-style: normal; }
.cfg-field code { background: rgba(245, 199, 106, 0.14); color: var(--gold); padding: 1px 6px; border-radius: 5px; }
.cfg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.cfg-field.half { margin: 0; }
.cfg-field.check { flex-direction: row; display: flex; align-items: center; gap: 8px; }
.cfg-field.check span { font-weight: 600; color: var(--muted); font-size: 13px; }
.cfg-field.check input { min-height: auto; width: 18px; height: 18px; }
.password-field { position: relative; display: flex; }
.password-field input { width: 100%; padding-right: 42px; }
.account-modal .cfg-field,
.account-modal .password-field,
.account-modal .cfg-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.password-toggle:hover { color: var(--text); }
.password-toggle .icon-eye-open { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-open { display: block; }
.cfg-status { min-height: 20px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cfg-status.ok { color: #7fdca0; }
.cfg-status.bad { color: #ff9d8e; }
.cfg-body .modal-actions { padding: 4px 0 0; }

/* 账号与云存档 */
/* 账号弹窗字体恢复：仅允许字体族与字号。 */
.account-modal {
  font-family: var(--font-ui);
  font-size: 1rem;
}
.account-modal .account-kicker {
  font-family: var(--font-ui);
  font-size: 12px;
}
.account-modal .modal-head h3 {
  font-family: var(--font-ui);
  font-size: clamp(1.45rem, 4vw, 1.9rem);
}
.account-modal .account-intro {
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.account-modal .cfg-field span {
  font-family: var(--font-ui);
  font-size: 0.8rem;
}
.account-modal .cfg-field input {
  font-family: var(--font-ui);
  font-size: 1rem;
}
.account-modal .account-mode button,
.account-modal .account-logout {
  font-family: var(--font-ui);
  font-size: 1rem;
}
.account-modal .account-back-to-login {
  font-family: var(--font-ui);
  font-size: 13px;
}
.account-modal #account-status {
  font-family: var(--font-ui);
  font-size: 0.8rem;
}
.account-modal .account-card strong {
  font-family: var(--font-ui);
  font-size: 17px;
}
.account-modal .account-card span {
  font-family: var(--font-ui);
  font-size: 13px;
}
/* 账号弹窗字体恢复结束。 */

.account-modal .modal-head h3 {
  font-weight: 700;
}

.account-kicker {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.account-modal .account-back-to-login {
  width: auto;
  min-width: 96px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.account-back-to-login[hidden] { display: none; }
.account-body { display: grid; gap: 14px; }
.account-intro { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.7; }
#account-form { display: grid; gap: 13px; }
#account-nickname-field[hidden] { display: none; }
.account-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.account-mode.is-register-mode { grid-template-columns: 1fr; }
.account-mode button, .account-logout {
  min-height: 44px; border-radius: 9px; font-weight: 800;
}
.account-mode .primary { background: var(--gold); color: #17110b; }
.account-mode .ghost, .account-logout {
  background: rgba(255, 255, 255, 0.08); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.account-card {
  display: grid; gap: 5px; border-radius: 10px; background: var(--panel-soft);
  padding: 16px; box-shadow: inset 0 0 0 1px var(--line);
}
.account-card strong { color: #fffaf2; font-size: 17px; }
.account-card span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.cloud-status {
  margin: 14px 0; border-radius: 9px; background: rgba(245, 199, 106, 0.07);
  padding: 11px 13px; color: #d9cfbd; font-size: 13px; line-height: 1.6;
}
.account-logout { width: 100%; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); z-index: 60;
  background: rgba(20, 22, 30, 0.96); color: var(--text); padding: 12px 20px; border-radius: 10px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transition: all 220ms ease; font-size: 14px;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  .app-shell, .app-shell.sidebar-collapsed { display: block; }
  .sidebar { position: relative; height: auto; gap: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-toggle { top: 20px; right: 32px; }
  .sidebar-peek-toggle { top: 20px; left: 16px; }
  .app-shell.sidebar-collapsed .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 276px);
    height: 100dvh;
    padding: 24px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: translateX(calc(-100% - 22px));
    opacity: 0;
    pointer-events: none;
  }
  .app-shell.sidebar-collapsed .sidebar-toggle { top: 20px; right: 32px; }
  .showcase-scroll {
    min-height: auto;
    margin: -24px calc(clamp(18px, 5vw, 64px) * -1) 0;
  }
  .showcase-stage {
    position: relative;
    min-height: auto;
    padding: 34px 0 56px;
  }
  .showcase-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0 22px;
  }
  .showcase-copy h1 { font-size: clamp(58px, 17vw, 112px); }
  .section-heading { margin-top: 36px; }
  .section-heading h2 { font-size: clamp(30px, 9vw, 48px); }
  .showcase-track-wrap {
    position: relative;
    bottom: auto;
    height: auto;
    margin-top: 34px;
    overflow-x: auto;
    overflow-y: visible;
    perspective: none;
    transform: none;
  }
  .works-grid.showcase-track {
    gap: 18px;
    width: auto;
    overflow-x: auto;
    padding: 0 22px 22px;
    scroll-snap-type: x mandatory;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .works-grid.showcase-track::-webkit-scrollbar { height: 0; }
  .work-card {
    width: min(82vw, 420px);
    min-width: min(82vw, 420px);
    transform: none;
    scroll-snap-align: center;
  }
  .showcase-more-card {
    width: min(82vw, 420px);
    min-width: min(82vw, 420px);
    min-height: 300px;
    margin-top: 0;
    scroll-snap-align: center;
  }
  .showcase-meter, .showcase-hint { display: none; }
  .work-card { max-width: none; }
  .all-works-section {
    margin: 0 calc(clamp(18px, 5vw, 64px) * -1) -64px;
    padding: 42px 22px 58px;
  }
  .all-works-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .all-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .all-work-card {
    width: auto;
    min-width: 0;
    scroll-snap-align: none;
  }
  .all-work-card .work-body { min-height: 176px; }
  #detail-view,
  #detail-view .detail-layout,
  #detail-view .play-panel,
  #detail-view .story-panel {
    height: auto;
    overflow: visible;
  }
  .detail-layout { grid-template-columns: 1fr; }
  .role-picker { grid-template-columns: 1fr; }
  .swap-btn { min-height: 50px; }
}
@media (max-width: 520px) {
  .section-heading { align-items: flex-start; flex-direction: column; }
  .showcase-stage { padding-bottom: 42px; }
  .showcase-copy { padding: 0 18px; }
  .works-grid.showcase-track { padding-inline: 18px; }
  .work-body { min-height: 260px; }
  .all-works-grid { grid-template-columns: 1fr; }
  .all-work-card .work-body { min-height: 164px; }
  .showcase-more-button { grid-template-columns: 58px minmax(0, 1fr); min-height: 64px; }
  .showcase-more-button i { font-size: 36px; }
  .crumbs { top: 14px; left: 14px; font-size: 18px; }
  .game-scene img { aspect-ratio: 1 / 0.74; }
  .story-stream { max-height: 52vh; }
  .story-input { grid-template-columns: 1fr; }
  .story-input button { width: 100%; }
  .start-button { min-height: 64px; font-size: 28px; border-width: 5px; }
  .cfg-row { grid-template-columns: 1fr; }
}

/* ============ 版本B · VN 舞台（文字叠背景图 · 逐拍 · 居中选项 · 情绪） ============ */
.game-window.vn { display: flex; flex-direction: column; gap: 14px; }
.game-window.vn .game-toolbar { justify-content: flex-end; }
body.game-mode .game-window.vn { gap: 14px; }

.vn-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 440px;
  border: 1px solid rgba(245, 199, 106, 0.2); border-radius: 14px;
  overflow: hidden; background: #06060a; outline: none;
}
body.game-mode .vn-stage {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.vn-stage.clickable { cursor: pointer; }
.vn-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.78;
  transition: opacity 260ms ease;
}
.vn-bg.is-changing { opacity: 0; }

/* ===== 每章动态氛围背景（随剧情切换 · 全 CSS 动画，零外部素材） ===== */
.vn-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0.92; transition: opacity 0.8s ease; }
.vn-fx::before, .vn-fx::after { content: ""; position: absolute; inset: -25%; }
/* 漂浮粒子层（薄雾/尘埃/花瓣，靠 --fx 上色） */
.vn-fx::before {
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--fx, #fff) 45%, transparent 46%),
    radial-gradient(2px 2px at 70% 60%, var(--fx, #fff) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 45% 82%, var(--fx, #fff) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 85% 22%, var(--fx, #fff) 45%, transparent 46%),
    radial-gradient(2px 2px at 32% 68%, var(--fx, #fff) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 60% 12%, var(--fx, #fff) 45%, transparent 46%);
  opacity: 0.45; animation: fx-drift 16s linear infinite;
}
@keyframes fx-drift { from { transform: translateY(4%); } to { transform: translateY(-12%); } }
/* 流光呼吸层 */
.vn-fx::after {
  background: radial-gradient(60% 50% at 50% 32%, var(--glow, rgba(255,255,255,.4)), transparent 70%);
  mix-blend-mode: screen; opacity: 0.4; animation: fx-breathe 7s ease-in-out infinite;
}
@keyframes fx-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes fx-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.64; transform: scale(1.06); } }
@keyframes fx-flicker { 0%, 100% { opacity: 0.5; } 45% { opacity: 0.2; } 55% { opacity: 0.72; } }

/* 8 套主题：底色渐变 + 粒子色 --fx + 流光 --glow */
.vn-fx.fx-none { opacity: 0; }
.vn-fx.fx-none::before, .vn-fx.fx-none::after { animation: none; }
.vn-fx.fx-coolblue  { background: linear-gradient(160deg, rgba(10,20,40,.55), rgba(20,40,70,.32) 50%, rgba(8,14,28,.6)); --fx: #bfe3ff; --glow: rgba(120,180,255,.5); }
.vn-fx.fx-crimson   { background: linear-gradient(160deg, rgba(52,8,12,.6), rgba(92,16,20,.4) 50%, rgba(30,4,6,.7)); --fx: #ffb3a0; --glow: rgba(255,72,60,.46); }
.vn-fx.fx-crimson::after { animation: fx-pulse 2.6s ease-in-out infinite; }
.vn-fx.fx-blackout  { background: linear-gradient(160deg, rgba(4,5,10,.82), rgba(10,12,22,.58) 50%, rgba(2,2,5,.9)); --fx: #9fb6d6; --glow: rgba(120,150,210,.3); }
.vn-fx.fx-blackgold { background: linear-gradient(160deg, rgba(8,6,4,.7), rgba(34,24,6,.45) 50%, rgba(4,3,2,.84)); --fx: #ffd877; --glow: rgba(245,199,106,.5); }
.vn-fx.fx-blackgold::before { animation: fx-drift 10s linear infinite, fx-flicker 3.2s steps(2) infinite; }
.vn-fx.fx-warmdawn  { background: linear-gradient(160deg, rgba(62,42,18,.42), rgba(96,70,32,.26) 50%, rgba(42,28,12,.5)); --fx: #ffe6b0; --glow: rgba(255,212,140,.5); }
.vn-fx.fx-rosepink  { background: linear-gradient(160deg, rgba(62,20,42,.44), rgba(94,38,62,.28) 50%, rgba(42,14,30,.52)); --fx: #ffc9e0; --glow: rgba(255,162,202,.5); }
.vn-fx.fx-indigo    { background: linear-gradient(160deg, rgba(20,16,46,.6), rgba(36,28,72,.4) 50%, rgba(12,10,30,.72)); --fx: #cbb8ff; --glow: rgba(150,120,255,.42); }
.vn-fx.fx-twilight  { background: linear-gradient(160deg, rgba(42,24,46,.5), rgba(82,46,62,.3) 50%, rgba(24,16,36,.6)); --fx: #ffd0c0; --glow: rgba(255,172,140,.42); }
@media (prefers-reduced-motion: reduce) {
  .vn-fx::before, .vn-fx::after { animation: none !important; }
}

.vn-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
}
.vn-title { color: var(--gold); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
.vn-scene { color: rgba(246,242,234,0.82); font-size: 12px; }
.vn-judge { margin-left: auto; border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,0.45); }
.vn-judge.adjust { color: var(--gold); }
.vn-judge.reject { color: var(--rose); }

/* ===== 弹幕条 ===== */
.vn-danmaku {
  position: absolute; top: 52px; left: 0; right: 0; z-index: 2;
  height: 118px; pointer-events: none; display: block; overflow: hidden; padding: 3px 0;
}
.dm-row { position: absolute; left: 0; right: 0; height: 24px; overflow: visible; width: 100%; }
#dm-row-0 { top: 0; }
#dm-row-1 { top: 28px; }
#dm-row-2 { top: 56px; }
#dm-row-3 { top: 84px; }
.dm-track {
  display: flex; gap: 8px; width: max-content;
  animation: dm-scroll var(--dm-dur, 44s) linear infinite;
}
.dm-bubble {
  position: absolute; left: 0; top: var(--dm-y, 0);
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  background: rgba(0,0,0,0.36); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 2px 9px;
  font-size: calc(var(--danmaku-size, 12px) * var(--dm-scale, 1));
  color: rgba(255,255,255,0.68); letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  opacity: var(--dm-opacity, 0.62);
  transform: translateX(var(--dm-start, 100vw));
  animation: dm-drift var(--dm-dur, 44s) linear infinite;
  animation-delay: var(--dm-delay, 0s);
}
@keyframes dm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dm-drift { from { transform: translateX(var(--dm-start, 100vw)); } to { transform: translateX(var(--dm-end, -130vw)); } }
@media (prefers-reduced-motion: reduce) { .dm-track, .dm-bubble { animation: none; } }

.vn-textbox {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 42%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 44px clamp(18px, 4vw, 40px) 22px;
  background: linear-gradient(180deg, transparent, rgba(8,8,12,0.62) 42%, rgba(8,8,12,var(--vn-textbox-alpha, 0.68)));
}
.vn-text {
  color: #f3ecdd; font-size: var(--vn-text-size, clamp(16px, 2.1vw, 21px)); line-height: 1.86;
  letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.65);
  min-height: 5.9em;
  max-height: min(36vh, 11.2em);
  overflow-y: auto;
  padding: 0.08em 4px 0.28em 0;
}
.vn-paragraph {
  display: block;
  margin: 0 0 0.54em;
  text-wrap: pretty;
}
.vn-paragraph:last-child {
  margin-bottom: 0;
}
.vn-narr { color: #f3ecdd; }
.vn-speaker {
  display: inline-block; margin-right: 8px; border: 1px solid currentColor; border-radius: 5px;
  padding: 1px 7px; background: rgba(8, 8, 12, 0.48); font-size: 0.72em; font-weight: 800;
  line-height: 1.45; vertical-align: 0.12em; white-space: nowrap;
  text-shadow: 0 0 10px color-mix(in srgb, currentColor 52%, transparent);
}
.vn-line.spk-a, .vn-line.spk-a b { color: var(--a); }
.vn-line.spk-b, .vn-line.spk-b b { color: var(--b); }
.vn-line.spk-x, .vn-line.spk-x b { color: var(--muted); }
.vn-text .muted { color: var(--muted); }
.vn-text .dots i { animation: blink 1.2s infinite both; }
.vn-emotion { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.vn-emotion[hidden] { display: none; }
.vn-emotion .emo { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,0.42); border: 1px solid var(--line); }
.vn-emotion .emo.spk-a,
.vn-emotion .emo.spk-b { color: var(--muted); box-shadow: inset 2px 0 0 var(--muted); }

.vn-hint { align-self: flex-end; color: var(--gold); font-size: 12px; letter-spacing: 0.08em; user-select: none; opacity: 0.88; }

/* 选项 + 自由输入：浮现在背景图中央 */
.vn-node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: min(88%, 660px); display: grid; gap: 12px; padding: 18px;
  background: rgba(12,13,17,0.86); border: 1px solid rgba(245,199,106,0.30);
  border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(7px);
}
.vn-node[hidden] { display: none; }
.vn-node .choice-area { display: grid; gap: 8px; }

@media (max-width: 720px) {
  .vn-stage { aspect-ratio: auto; min-height: 72vh; }
  .vn-node { width: 94%; }
}

/* 历史弹窗下载按钮 */
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.sm-btn { font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.modal-head button.icon-only {
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}
.modal-head button.icon-only::after {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: 120px;
  padding: 5px 8px;
  border: 1px solid rgba(245, 199, 106, 0.26);
  border-radius: 6px;
  background: rgba(16, 10, 12, 0.94);
  color: var(--gold);
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
.modal-head button.icon-only:hover::after,
.modal-head button.icon-only:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ 版本B · 详情页人物简介（B版观感，配 A版浅色 aside） ============ */
.character-profile { margin-top: 16px; display: grid; gap: 12px; }
.cp-title { margin: 0; color: #9b6c38; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.cp-card { border-radius: 10px; background: #f6f1e8; border: 1px solid rgba(245, 199, 106, 0.30); padding: 14px 16px; }
.cp-card.cp-a { box-shadow: inset 3px 0 0 var(--a); }
.cp-card.cp-b { box-shadow: inset 3px 0 0 var(--b); }
.cp-eyebrow { margin: 0; color: #bd8558; font-size: 12px; font-weight: 800; }
.cp-card h4 { margin: 4px 0 8px; color: #2c2824; font-size: 22px; line-height: 1.1; }
.cp-bio { margin: 0; color: #625a54; font-size: 13px; line-height: 1.7; }
.cp-facts { margin-top: 10px; display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.cp-facts span { color: #9b6c38; font-weight: 800; }
.cp-facts b { color: #4a443f; font-weight: 700; }

/* ============ 7.4 Redesign · 暗金幻想书阁 / 命运画卷 / CP VN 舞台 ============ */
.sidebar {
  background:
    linear-gradient(180deg, rgba(8, 6, 8, 0.96), rgba(18, 10, 14, 0.94)),
    rgba(8, 6, 8, 0.96);
  border-right-color: rgba(241, 207, 145, 0.16);
  box-shadow: 18px 0 52px rgba(0, 0, 0, 0.24);
}
.brand {
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-color: rgba(255, 231, 181, 0.36);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 231, 181, 0.20), transparent 58%),
    url("饲界-开始界面/assets/sijie-logo-symbol-only-transparent.png") center / 76% auto no-repeat,
    rgba(28, 18, 20, 0.72);
  color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 28px rgba(241, 207, 145, 0.10);
}
.brand strong {
  color: var(--parchment);
  font-family: "SlideYouran", "Songti SC", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.brand small {
  color: rgba(255, 242, 214, 0.54);
  letter-spacing: 0.04em;
}
.nav-item {
  border-radius: 14px;
  color: rgba(255, 242, 214, 0.74);
}
.nav-item.active,
.nav-item:hover,
.nav-item:focus-visible {
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.16), rgba(212, 138, 150, 0.08)),
    rgba(255, 255, 255, 0.035);
  color: var(--parchment);
  box-shadow: inset 0 0 0 1px rgba(241, 207, 145, 0.24);
}

.showcase-stage {
  min-height: 100dvh;
  background:
    linear-gradient(90deg, rgba(5, 4, 6, 0.94) 0%, rgba(5, 4, 6, 0.82) 34%, rgba(5, 4, 6, 0.52) 64%, rgba(5, 4, 6, 0.86) 100%),
    radial-gradient(circle at 70% 36%, rgba(241, 207, 145, 0.18), transparent 24rem),
    url("assets/work-cover.png") center / cover no-repeat;
}
.showcase-stage::before {
  background-image:
    linear-gradient(115deg, transparent 0 44%, rgba(241, 207, 145, 0.16) 44.3% 44.6%, transparent 45%),
    radial-gradient(circle, rgba(255, 231, 181, 0.70) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(212, 138, 150, 0.36) 0 1px, transparent 1.7px);
  background-position:
    calc(var(--showcase-bg-x) * 0.28) 0,
    calc(var(--showcase-bg-x) * 0.16) 42px,
    calc(var(--showcase-bg-x) * 0.08) 112px;
  background-size: auto, 290px 210px, 520px 320px;
  opacity: 0.30;
}
.showcase-stage::after {
  background:
    radial-gradient(46rem 26rem at 74% 50%, rgba(241, 207, 145, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(5, 4, 6, 0.1), rgba(5, 4, 6, 0.74) 100%);
}
.showcase-field {
  background:
    radial-gradient(18rem 2.4rem at 62% 48%, rgba(241, 207, 145, 0.34), transparent 72%),
    radial-gradient(14rem 2.2rem at 47% 62%, rgba(212, 138, 150, 0.22), transparent 76%);
  opacity: 0.86;
}
.showcase-copy {
  position: absolute;
  z-index: 20;
  top: clamp(96px, 11.5vh, 128px);
  left: clamp(34px, 5vw, 82px);
  display: block;
  width: min(38vw, 520px);
  max-width: 560px;
  color: var(--parchment);
  opacity: var(--showcase-copy-opacity);
  transform:
    translate3d(calc(var(--showcase-cover-progress) * -54px), 0, 0)
    scale(calc(1 - var(--showcase-cover-progress) * 0.08));
  filter:
    blur(calc(var(--showcase-cover-progress) * 16px))
    brightness(calc(1 - var(--showcase-cover-progress) * 0.46));
  transition:
    opacity 90ms ease,
    transform 220ms ease,
    filter 220ms ease;
  pointer-events: none;
}
.showcase-hero-logo {
  display: block;
  width: min(210px, 52%);
  height: auto;
  margin: 0 0 26px -12px;
  filter:
    drop-shadow(0 0 16px rgba(255, 231, 181, 0.18))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}
.showcase-copy .eyebrow {
  width: fit-content;
  margin-bottom: 14px;
  border: 1px solid rgba(241, 207, 145, 0.26);
  border-radius: 999px;
  background: rgba(16, 10, 12, 0.58);
  padding: 7px 12px;
  color: var(--gold-bright);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.showcase-copy h1 {
  margin: 0;
  color: var(--parchment);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  font-size: clamp(52px, 5vw, 82px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
  text-shadow:
    0 3px 0 rgba(52, 30, 20, 0.58),
    0 22px 58px rgba(0, 0, 0, 0.58),
    0 0 24px rgba(241, 207, 145, 0.14);
}
.showcase-lede {
  max-width: 31rem;
  margin: 24px 0 0;
  color: rgba(255, 242, 214, 0.74);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.8;
  text-wrap: pretty;
}
.showcase-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
.showcase-proof span {
  border: 1px solid rgba(241, 207, 145, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 8px 11px;
  color: rgba(255, 242, 214, 0.68);
  font-size: 12px;
  font-weight: 700;
}
.section-heading {
  margin-top: clamp(32px, 6vh, 62px);
  border-left: 2px solid rgba(241, 207, 145, 0.58);
  padding-left: 16px;
}
.section-heading h2 {
  color: var(--gold-bright);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 700;
}
.section-heading p {
  display: block;
  margin: 8px 0 0;
  color: rgba(255, 242, 214, 0.56);
  line-height: 1.6;
}
.showcase-track-wrap {
  z-index: 50;
  left: 0;
  top: 52%;
  right: 0;
  transform: translateY(-48%);
  isolation: isolate;
}
.works-grid.showcase-track {
  gap: clamp(24px, 3vw, 46px);
  padding: 0 clamp(620px, 48vw, 820px) 0 clamp(430px, 39vw, 620px);
}
.showcase-hint {
  color: rgba(255, 231, 181, 0.54);
}
.showcase-meter {
  background: rgba(255, 231, 181, 0.09);
}
.showcase-meter span {
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--rose));
}

.work-card {
  position: relative;
  z-index: 51;
  border-color: rgba(241, 207, 145, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 242, 214, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(14, 11, 14, 0.99);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
}
.work-card:hover {
  border-color: rgba(255, 231, 181, 0.52);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(241, 207, 145, 0.18),
    0 0 40px rgba(241, 207, 145, 0.10);
}
.cover-link::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent 45%, rgba(8, 6, 8, 0.42)),
    linear-gradient(90deg, rgba(241, 207, 145, 0.16), transparent 34%);
}
.work-badge {
  border: 1px solid rgba(241, 207, 145, 0.24);
  border-radius: 999px;
  background: rgba(8, 6, 8, 0.72);
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}
.work-body {
  min-height: 238px;
  padding: 20px 22px 22px;
}
.work-title-row h3 {
  color: var(--parchment);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  overflow-wrap: anywhere;
}
.work-title-row span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(212, 138, 150, 0.26);
  border-radius: 999px;
  background: rgba(212, 138, 150, 0.13);
  color: #ffc3cc;
}
.work-body p {
  color: rgba(255, 242, 214, 0.76);
  font-size: 16px;
  line-height: 1.72;
}
.meta-row span {
  border-color: rgba(241, 207, 145, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 242, 214, 0.58);
}
.meta-row.sub {
  margin-bottom: 18px;
}
.work-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  border-top: 1px solid rgba(241, 207, 145, 0.14);
  padding-top: 16px;
  color: var(--gold-bright);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.work-action-row b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(241, 207, 145, 0.32);
  border-radius: 999px;
  background: rgba(241, 207, 145, 0.10);
  font-size: 16px;
}
.work-action-row b .sijie-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.showcase-more-card {
  color: rgba(255, 242, 214, 0.76);
}
.showcase-more-button {
  border-color: rgba(241, 207, 145, 0.38);
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.18), rgba(212, 138, 150, 0.12)),
    rgba(8, 6, 8, 0.70);
}

.all-works-section {
  background:
    linear-gradient(180deg, rgba(8, 6, 8, 0.96), rgba(20, 9, 14, 0.98)),
    var(--sijie-bg);
}
.all-works-heading h2 {
  color: var(--parchment);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.all-work-card {
  background:
    linear-gradient(180deg, rgba(255, 242, 214, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(15, 11, 15, 0.90);
}
.all-work-card .work-title-row h3 {
  font-size: 22px;
}

.game-window {
  border-color: rgba(241, 207, 145, 0.20);
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 207, 145, 0.09), transparent 26rem),
    rgba(8, 6, 8, 0.82);
}
.game-window.vn .game-toolbar {
  justify-content: flex-end;
}
.tool-btns button {
  border-radius: 999px;
  background: rgba(255, 242, 214, 0.075);
  color: rgba(255, 242, 214, 0.80);
  box-shadow: inset 0 0 0 1px rgba(241, 207, 145, 0.14);
}
.tool-btns button:hover,
.tool-btns button:focus-visible {
  background: rgba(241, 207, 145, 0.14);
  color: var(--parchment);
  outline: none;
}
.vn-stage {
  border-color: rgba(241, 207, 145, 0.24);
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 28px 84px rgba(0, 0, 0, 0.48);
}
.vn-bg {
  opacity: 0.84;
}
.vn-top {
  padding: 18px 22px;
  background:
    linear-gradient(180deg, rgba(6, 5, 7, 0.68), rgba(6, 5, 7, 0.22), transparent);
}
.vn-title {
  color: var(--gold-bright);
  font-family: "Songti SC", "Noto Serif SC", serif;
}
.vn-textbox {
  left: clamp(14px, 1.4vw, 24px);
  right: clamp(14px, 1.4vw, 24px);
  bottom: clamp(14px, 1.4vw, 24px);
  min-height: auto;
  border: 1px solid rgba(241, 207, 145, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(12, 9, 12, 0.40), rgba(8, 6, 8, var(--vn-textbox-alpha, 0.60))),
    rgba(8, 6, 8, 0.46);
  padding: clamp(22px, 3vw, 34px);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(9px);
}
.vn-text {
  color: var(--parchment);
  font-size: var(--vn-text-size, clamp(17px, 1.85vw, 23px));
  line-height: 1.84;
}
.vn-hint {
  color: var(--gold-bright);
}
.dm-bubble {
  border-color: rgba(241, 207, 145, 0.12);
  background: rgba(8, 6, 8, 0.34);
  color: rgba(255, 242, 214, 0.54);
}
.vn-node {
  border-color: rgba(241, 207, 145, 0.28);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(27, 18, 21, 0.92), rgba(9, 7, 9, 0.92));
}
.choice-btn,
.story-input input {
  border-radius: 14px;
}
.choice-btn {
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(255, 242, 214, 0.045);
}
.story-input button {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* 游戏官网化细化：参考官网式半透明导航、精细分割线和横幅入口质感 */
.sidebar {
  gap: 34px;
  border-right-color: rgba(241, 207, 145, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 5, 8, 0.96), rgba(18, 6, 12, 0.94)),
    radial-gradient(circle at 38% 0%, rgba(241, 207, 145, 0.10), transparent 19rem);
  box-shadow:
    inset -1px 0 0 rgba(255, 242, 214, 0.04),
    18px 0 60px rgba(0, 0, 0, 0.26);
}
.sidebar::before {
  position: absolute;
  inset: 0 14px auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(241, 207, 145, 0.42), transparent);
  opacity: 0.55;
}
.brand {
  position: relative;
  min-height: 72px;
  padding: 10px 8px 16px;
}
.brand::after {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(241, 207, 145, 0.34), rgba(241, 207, 145, 0.04));
}
.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 242, 214, 0.18), transparent 52%),
    rgba(255, 242, 214, 0.035);
  box-shadow:
    0 0 28px rgba(241, 207, 145, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.brand-mark img {
  width: 39px;
  height: 39px;
  filter: drop-shadow(0 0 10px rgba(255, 231, 181, 0.18));
}
.brand strong {
  color: var(--parchment);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(241, 207, 145, 0.18);
}
.brand small {
  color: rgba(255, 242, 214, 0.52);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0.08em;
}
.nav-stack {
  gap: 14px;
  padding: 0 2px;
}
.sidebar-account-nav {
  margin-top: auto;
  align-self: stretch;
  min-height: 76px;
}
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon label"
    "icon sub";
  align-content: center;
  row-gap: 6px;
  min-height: 66px;
  border: 1px solid rgba(241, 207, 145, 0.10);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 242, 214, 0.045), transparent 72%),
    rgba(255, 255, 255, 0.014);
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.nav-item::after {
  position: absolute;
  top: 14px;
  right: 12px;
  bottom: 14px;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(241, 207, 145, 0.26), transparent);
  opacity: 0;
}
.nav-item.active,
.nav-item:hover,
.nav-item:focus-visible {
  border-color: rgba(241, 207, 145, 0.34);
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.18), rgba(212, 138, 150, 0.07) 48%, transparent),
    rgba(255, 242, 214, 0.035);
  box-shadow:
    inset 0 0 0 1px rgba(255, 242, 214, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.22);
}
.nav-item.active::after,
.nav-item:hover::after {
  opacity: 1;
}
.nav-icon {
  grid-area: icon;
  align-self: center;
  justify-self: start;
}
.nav-label {
  grid-area: label;
  color: rgba(255, 242, 214, 0.86);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0.08em;
}
.nav-sub {
  grid-area: sub;
  margin-top: 4px;
  color: rgba(255, 242, 214, 0.36);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.18em;
}
.sidebar-toggle {
  top: 34px;
  right: 32px;
  width: 38px;
  height: 38px;
  border-color: rgba(241, 207, 145, 0.36);
  background: rgba(20, 21, 28, 0.76);
  backdrop-filter: blur(12px);
}
.showcase-stage {
  background:
    linear-gradient(90deg, rgba(5, 4, 6, 0.95) 0%, rgba(5, 4, 6, 0.72) 36%, rgba(5, 4, 6, 0.44) 68%, rgba(5, 4, 6, 0.84) 100%),
    radial-gradient(circle at 68% 38%, rgba(241, 207, 145, 0.16), transparent 25rem),
    url("assets/work-cover.png") center / cover no-repeat;
}
.showcase-copy {
  width: min(31vw, 455px);
  max-width: 455px;
}
.showcase-copy .eyebrow {
  position: relative;
  padding: 8px 15px;
  border-color: rgba(241, 207, 145, 0.36);
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.10), rgba(255, 255, 255, 0.025)),
    rgba(8, 6, 8, 0.54);
  box-shadow: 0 0 24px rgba(241, 207, 145, 0.08);
}
.showcase-copy .eyebrow::before {
  content: none;
}
.showcase-copy h1 {
  max-width: 7.2em;
  font-size: clamp(40px, 3.45vw, 56px);
  line-height: 1.12;
}
.showcase-lede {
  max-width: 25rem;
  color: rgba(255, 242, 214, 0.72);
  font-size: clamp(15px, 1.06vw, 16px);
  line-height: 1.72;
}
.showcase-proof {
  margin-top: 18px;
}
.showcase-proof span {
  border-color: rgba(241, 207, 145, 0.24);
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.11), rgba(255,255,255,0.025)),
    rgba(8, 6, 8, 0.44);
}
.work-card {
  border-radius: 12px;
  border-color: rgba(241, 207, 145, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 242, 214, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(13, 10, 13, 0.96);
}
.work-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(241, 207, 145, 0.10), transparent 18%, transparent 78%, rgba(255, 242, 214, 0.05)),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 1px);
  opacity: 0.68;
}
.cover-link,
.work-body {
  position: relative;
  z-index: 2;
}
.cover-link {
  aspect-ratio: 16 / 9.6;
}
.cover-link::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 38%, rgba(8, 6, 8, 0.52)),
    linear-gradient(90deg, rgba(241, 207, 145, 0.20), transparent 30%);
}
.work-badge {
  top: 16px;
  left: 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(241, 207, 145, 0.20), rgba(8, 6, 8, 0.70)),
    rgba(8, 6, 8, 0.84);
  padding: 8px 13px;
}
.work-body {
  display: flex;
  flex-direction: column;
  min-height: 252px;
  padding: 22px 24px 24px;
}
.work-title-row h3 {
  font-size: 25px;
  letter-spacing: 0.02em;
}
.work-body p {
  margin-top: 16px;
  color: rgba(255, 242, 214, 0.70);
}
.work-action-row {
  margin-top: auto;
  padding-top: 18px;
}
.work-card.showcase-more-card {
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  width: clamp(420px, 36vw, 600px);
  height: clamp(640px, 78vh, 820px);
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.work-card.showcase-more-card::before {
  content: none;
}
.work-card.showcase-more-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.work-card.showcase-more-card .showcase-more-inner {
  place-self: center;
  width: min(86%, 480px);
  min-height: clamp(300px, 42vh, 430px);
}
.all-works-section {
  position: relative;
  border-top: 1px solid rgba(241, 207, 145, 0.12);
}
.all-works-section::before {
  position: absolute;
  top: 0;
  right: clamp(22px, 6vw, 86px);
  left: clamp(22px, 6vw, 86px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(241, 207, 145, 0.45), transparent);
}

@media (min-width: 901px) {
  .showcase-copy .section-heading {
    display: none;
  }
}

@media (max-width: 900px) {
  .showcase-stage {
    min-height: auto;
    padding: 30px 0 56px;
  }
  .showcase-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0 22px;
  }
  .showcase-hero-logo {
    width: 150px;
    margin-left: -8px;
  }
  .showcase-copy h1 {
    font-size: clamp(42px, 13vw, 72px);
  }
  .showcase-lede {
    margin-top: 18px;
  }
  .showcase-proof {
    margin-top: 20px;
  }
  .section-heading {
    margin-top: 26px;
  }
  .showcase-track-wrap {
    left: auto;
    top: auto;
    transform: none;
  }
}

@media (max-width: 520px) {
  .showcase-stage {
    padding: 26px 0 38px;
  }
  .showcase-hero-logo {
    width: 118px;
    margin-bottom: 16px;
  }
  .showcase-copy h1 {
    font-size: clamp(38px, 12vw, 54px);
  }
  .showcase-lede {
    font-size: 15px;
    line-height: 1.72;
  }
  .showcase-proof {
    gap: 8px;
  }
  .showcase-proof span {
    padding: 7px 10px;
    font-size: 11px;
  }
  .section-heading h2 {
    font-size: 27px;
  }
  .section-heading p {
    font-size: 13px;
  }
  .showcase-track-wrap {
    margin-top: 22px;
  }
}

/* ============ 7.7 Variant-inspired token pass · 只取滚动探索与层级，不取配色 ============ */
.sidebar {
  background:
    linear-gradient(180deg, rgba(8, 5, 8, 0.94), rgba(18, 7, 12, 0.90)),
    var(--surface-sidebar);
  backdrop-filter: blur(22px);
}
.brand {
  min-height: 76px;
}
.brand-mark {
  width: 58px;
  height: 58px;
}
.brand-mark img {
  width: 44px;
  height: 44px;
}
.nav-item {
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
  transition:
    transform 220ms var(--ease-spring),
    border-color 220ms var(--ease-spring),
    background 220ms var(--ease-spring),
    box-shadow 220ms var(--ease-spring);
}
.nav-item:hover,
.nav-item:focus-visible {
  transform: translateX(2px);
}

.showcase-stage {
  background:
    linear-gradient(90deg, rgba(5, 4, 6, 0.95) 0%, rgba(5, 4, 6, 0.78) 33%, rgba(5, 4, 6, 0.44) 66%, rgba(5, 4, 6, 0.88) 100%),
    radial-gradient(circle at 66% 32%, rgba(241, 207, 145, 0.16), transparent 28rem),
    url("assets/work-cover.png") center / cover no-repeat;
}
.showcase-stage::after {
  background:
    radial-gradient(44rem 28rem at 70% 50%, rgba(241, 207, 145, 0.10), transparent 74%),
    linear-gradient(180deg, rgba(5, 4, 6, 0.08), rgba(5, 4, 6, 0.76) 100%);
}
.showcase-copy {
  top: clamp(108px, 14vh, 150px);
  left: clamp(44px, 5.5vw, 92px);
  width: min(32vw, 455px);
  filter:
    blur(calc(var(--showcase-cover-progress) * 18px))
    brightness(calc(1 - var(--showcase-cover-progress) * 0.50))
    saturate(calc(1 - var(--showcase-cover-progress) * 0.22));
}
.showcase-copy h1 {
  max-width: 7.4em;
  font-size: clamp(42px, 3.55vw, 62px);
  line-height: 1.10;
}
.showcase-lede {
  max-width: 27rem;
}
.showcase-track-wrap {
  z-index: 50;
  top: 51%;
  padding-block: clamp(28px, 4vh, 48px);
  mask-image: linear-gradient(90deg, transparent 0, #000 5vw, #000 calc(100% - 5vw), transparent 100%);
}
.works-grid.showcase-track {
  gap: var(--rail-gap);
  padding-left: clamp(590px, 45vw, 760px);
  padding-right: clamp(520px, 42vw, 760px);
}
.showcase-card {
  flex-basis: clamp(430px, 31vw, 520px);
}
.work-card {
  width: clamp(430px, 31vw, 520px);
  max-width: 520px;
  border-color: var(--border-card);
  border-radius: var(--card-radius);
  background:
    linear-gradient(180deg, rgba(255, 242, 214, 0.07), rgba(255, 255, 255, 0.014)),
    var(--surface-card);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 242, 214, 0.035);
  transition:
    transform 260ms var(--ease-spring),
    border-color 260ms var(--ease-spring),
    box-shadow 260ms var(--ease-spring),
    background 260ms var(--ease-spring);
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--border-card-hover);
  background:
    linear-gradient(180deg, rgba(255, 242, 214, 0.085), rgba(255, 255, 255, 0.02)),
    var(--surface-card-hover);
  box-shadow:
    0 38px 126px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(241, 207, 145, 0.18),
    0 0 44px rgba(241, 207, 145, 0.11);
  outline: none;
}
.cover-link {
  aspect-ratio: 16 / 9.35;
  border-bottom: 1px solid rgba(241, 207, 145, 0.12);
}
.work-body {
  display: flex;
  min-height: 282px;
  flex-direction: column;
  padding: 24px 26px 25px;
}
.work-title-row {
  gap: 10px;
}
.work-title-row h3 {
  color: var(--parchment);
  font-size: clamp(25px, 1.7vw, 30px);
  line-height: 1.22;
  text-wrap: balance;
  white-space: normal;
}
.work-title-row span {
  padding: 7px 11px;
  font-size: 12px;
}
.work-body p {
  margin: 18px 0 17px;
  color: rgba(255, 242, 214, 0.72);
  line-height: 1.72;
  text-wrap: pretty;
}
.meta-row {
  gap: 9px;
}
.meta-row.sub {
  margin: 11px 0 0;
}
.work-action-row {
  min-height: 56px;
  margin-top: auto;
  padding-top: 18px;
}
.work-action-row b {
  width: 34px;
  height: 34px;
}

.work-card.showcase-more-card {
  width: clamp(460px, 36vw, 620px);
  height: clamp(640px, 76vh, 820px);
  transform: none;
}
.work-card.showcase-more-card:focus-visible {
  outline: none;
}
.work-card.showcase-more-card .showcase-more-inner {
  width: min(84%, 480px);
  min-height: clamp(320px, 43vh, 430px);
  background:
    radial-gradient(circle at 50% 35%, rgba(241, 207, 145, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255, 242, 214, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(12, 9, 12, 0.70);
}
.showcase-more-button {
  min-height: 64px;
}

.all-works-section {
  padding-top: clamp(64px, 7vw, 108px);
}
.all-works-heading {
  align-items: flex-end;
  margin-bottom: 34px;
}
.all-works-heading h2 {
  font-family: var(--font-ui);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: 0;
}
.all-works-grid {
  align-items: stretch;
  gap: 30px;
}
.all-work-card {
  display: flex;
  width: auto;
  min-height: 570px;
  flex-direction: column;
}
.all-work-card .work-body {
  min-height: 0;
  flex: 1;
}
.all-work-card .work-action-row {
  margin-top: auto;
}

.game-window {
  background:
    radial-gradient(circle at 52% 0%, rgba(241, 207, 145, 0.09), transparent 28rem),
    rgba(8, 6, 8, 0.76);
}
.tool-btns button {
  transition:
    transform 180ms var(--ease-spring),
    background 180ms var(--ease-spring),
    box-shadow 180ms var(--ease-spring);
}
.tool-btns button:active {
  transform: scale(0.97);
}
.vn-textbox {
  background:
    linear-gradient(180deg, rgba(12, 9, 12, calc(var(--vn-textbox-alpha-top, 0.40))), rgba(8, 6, 8, var(--vn-textbox-alpha, 0.60))),
    rgba(8, 6, 8, var(--vn-textbox-alpha-base, 0.46));
}

@media (max-width: 900px) {
  .showcase-copy {
    top: auto;
    left: auto;
    width: auto;
  }
  .works-grid.showcase-track {
    gap: 18px;
    padding-inline: 22px;
  }
  .showcase-card,
  .work-card {
    width: min(84vw, 430px);
    min-width: min(84vw, 430px);
  }
  .all-works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .all-works-grid {
    grid-template-columns: 1fr;
  }
  .all-work-card {
    min-height: auto;
  }
}

/* ============ 7.7 首页收束：只保留主视觉与首个剧本 ============ */
body:not(.game-mode) #explore-view {
  overflow: visible;
}

body:not(.game-mode) #explore-view .showcase-scroll {
  min-height: calc(100dvh - 48px);
  margin: -24px calc(clamp(18px, 5vw, 64px) * -1) 0;
  overflow: hidden;
}

body:not(.game-mode) #explore-view .all-works-section {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

body:not(.game-mode) #explore-view .showcase-stage {
  display: grid;
  min-height: calc(100dvh - 48px);
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 560px);
  align-items: center;
  column-gap: clamp(56px, 7vw, 132px);
  padding: clamp(44px, 6vh, 72px) clamp(56px, 7vw, 132px);
  overflow: hidden;
}

body:not(.game-mode) #explore-view .showcase-copy {
  position: relative;
  z-index: 12;
  top: auto;
  left: auto;
  display: block;
  width: min(38vw, 520px);
  opacity: 1;
  transform: none;
  filter: none;
}

body:not(.game-mode) #explore-view .showcase-copy .section-heading {
  display: none;
}

body:not(.game-mode) #explore-view .showcase-track-wrap {
  position: relative;
  z-index: 14;
  top: auto;
  left: auto;
  right: auto;
  width: min(100%, 560px);
  overflow: visible;
  padding: 0;
  overscroll-behavior-x: auto;
  mask-image: none;
  perspective: none;
  transform: none;
  isolation: auto;
}

body:not(.game-mode) #explore-view .works-grid.showcase-track {
  display: block;
  width: auto;
  padding: 0;
}

body:not(.game-mode) #explore-view .showcase-card,
body:not(.game-mode) #explore-view .work-card.showcase-featured-card {
  width: min(100%, 560px);
  min-width: 0;
  max-width: 560px;
  flex: none;
}

body:not(.game-mode) #explore-view .showcase-meter,
body:not(.game-mode) #explore-view .showcase-hint {
  display: none;
}

body:not(.game-mode) #explore-view .showcase-magic-rings {
  inset: 8vh auto auto 37vw;
  opacity: 0.22;
}

body:not(.game-mode) #explore-view .work-card .work-body {
  display: flex;
  flex-direction: column;
}

body:not(.game-mode) #explore-view .work-card .meta-row.sub {
  margin-top: auto;
  padding-top: 16px;
}

body:not(.game-mode) #explore-view .work-card .work-play-count {
  margin-top: auto;
  padding-top: 16px;
  color: rgba(246, 242, 234, 0.48);
  font-size: 12px;
  line-height: 1.4;
}

body:not(.game-mode) #explore-view .work-card .meta-row.sub span {
  background: transparent;
  border: 0;
  padding-left: 0;
  color: rgba(246, 242, 234, 0.48);
}

body:not(.game-mode) #explore-view .work-card .work-action-row {
  margin-top: 0;
}

@media (max-width: 1100px) {
  body:not(.game-mode) #explore-view .showcase-stage {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 32px;
    padding: 42px 24px 56px;
  }

  body:not(.game-mode) #explore-view .showcase-copy {
    width: min(100%, 620px);
  }

  body:not(.game-mode) #explore-view .showcase-track-wrap {
    width: min(100%, 560px);
  }
}