/* ==========================================================================
   妖精的女儿 · 月与蔷薇的魔女茶会
   公开页与管理端共用的纸面 / 金框 / 浮雕视觉系统
   ========================================================================== */

:root {
  --paper: #FBF3E4;
  --paper-deep: #F6E8D3;
  --card: #FFF9EF;
  --card-2: #FFFDF7;

  --ink: #33232B;
  --ink-soft: #5B3A44;
  --wine: #6B2F45;
  --wine-deep: #4A1E2F;
  --wine-hover: #8A4058;

  --gold: #B8893B;
  --gold-light: #D9B45B;
  --gold-hi: #F3D99A;
  --gold-deep: #8A6427;

  --pink: #D9A5A5;
  --pink-soft: #EBC9C9;
  --sage: #9CAF88;
  --blue: #A9BED6;
  --lav: #C9B6D9;

  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body: "Yuanti SC", "YouYuan", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;

  --shadow-soft: 0 12px 30px rgba(74, 30, 47, 0.10);
  --shadow-card: inset 0 1px 0 #FFFFFF, 0 2px 0 rgba(138, 100, 39, 0.18), 0 14px 32px rgba(74, 30, 47, 0.11);
  --ease: cubic-bezier(0.22, 0.7, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 10% 6%, rgba(235, 201, 201, 0.30), transparent 28%),
    radial-gradient(circle at 92% 3%, rgba(201, 182, 217, 0.24), transparent 26%),
    radial-gradient(circle at 4% 72%, rgba(156, 175, 136, 0.18), transparent 24%),
    radial-gradient(circle at 96% 84%, rgba(169, 190, 214, 0.16), transparent 26%),
    repeating-linear-gradient(0deg, rgba(184, 137, 59, 0.030) 0 1px, transparent 1px 28px);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(184, 137, 59, 0.75);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--wine-deep);
  text-decoration-color: var(--wine-deep);
}

img {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--gold-hi);
  color: var(--ink);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  background: var(--wine);
  color: #FFF7E8;
  border: 2px solid var(--gold);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
  color: #FFF7E8;
}

/* --------------------------------------------------------------------------
   按钮：实色底、48px 以上、2px 金/深色描边、hover 与 focus 明显
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 28px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--wine);
  color: #FFF7E8;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 4px 0 rgba(74, 30, 47, 0.26),
    0 10px 20px rgba(74, 30, 47, 0.16);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn:hover {
  background: var(--wine-hover);
  border-color: var(--gold-light);
  color: #FFFDF7;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 6px 0 rgba(74, 30, 47, 0.24),
    0 16px 26px rgba(74, 30, 47, 0.2);
}

.btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(74, 30, 47, 0.24);
}

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px var(--gold-hi),
    0 4px 0 rgba(74, 30, 47, 0.26);
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  transform: none;
  background: #8C7A80;
  border-color: #B9A98F;
  color: #FFFDF7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--secondary {
  background: var(--card);
  color: var(--wine);
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -3px 0 rgba(184, 137, 59, 0.18),
    0 3px 0 rgba(184, 137, 59, 0.30),
    0 8px 18px rgba(74, 30, 47, 0.10);
}

.btn--secondary:hover {
  background: var(--gold-hi);
  color: var(--wine-deep);
  border-color: var(--gold);
}

.btn--outline {
  background: var(--card);
  color: var(--wine);
  border-color: var(--wine);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 3px 0 rgba(107, 47, 69, 0.22),
    0 8px 18px rgba(74, 30, 47, 0.10);
}

.btn--outline:hover {
  background: var(--wine);
  color: #FFFDF7;
  border-color: var(--gold);
}

.btn--ghost {
  background: var(--card-2);
  color: var(--wine);
  border-color: var(--gold-light);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 2px 0 rgba(184, 137, 59, 0.22),
    0 6px 14px rgba(74, 30, 47, 0.07);
}

.btn--ghost:hover {
  background: var(--gold-hi);
  color: var(--wine-deep);
  border-color: var(--gold);
}

.btn--danger {
  background: #8A2739;
  color: #FFF7E8;
  border-color: #5C1624;
}

.btn--danger:hover {
  background: #A63348;
  border-color: var(--gold);
  color: #FFFFFF;
}

.btn--small {
  min-height: 48px;
  padding: 9px 20px;
  font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   顶部导航
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 243, 228, 0.97);
  border-bottom: 1px solid rgba(184, 137, 59, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(74, 30, 47, 0.07);
  backdrop-filter: blur(8px);
}

.topbar__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 12px 28px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand__emblem {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 2px rgba(74, 30, 47, 0.16));
}

.brand__emblem svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand__words {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--wine);
  letter-spacing: 0.01em;
}

.brand__line {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.topnav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease);
}

.topnav__link:hover {
  background: var(--gold-hi);
  color: var(--wine-deep);
  text-decoration: none;
}

.topnav__link:hover::after {
  transform: scaleX(1);
}

.topnav__cta {
  margin-left: 8px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 46px 24px 6px;
}

.hero__inner {
  max-width: 1220px;
  margin: 0 auto;
}

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: 34px;
  padding: 40px 42px;
  border: 2px solid var(--gold);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 18%, rgba(235, 201, 201, 0.28), transparent 34%),
    radial-gradient(circle at 86% 74%, rgba(169, 190, 214, 0.22), transparent 36%),
    linear-gradient(155deg, #FFF9EF 0%, #FBF3E4 58%, #F6E8D3 100%);
  box-shadow:
    inset 0 0 0 1px #FFFFFF,
    inset 0 0 60px rgba(217, 180, 91, 0.10),
    0 0 0 7px var(--paper),
    0 0 0 9px rgba(184, 137, 59, 0.42),
    0 28px 64px rgba(74, 30, 47, 0.14);
}

.hero__stage::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(184, 137, 59, 0.55);
  border-radius: 15px;
  pointer-events: none;
}

.hero__stage::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.hero__corner {
  position: absolute;
  z-index: 3;
  width: 58px;
  height: 58px;
  opacity: 0.9;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 58C6 32 18 14 42 6' fill='none' stroke='%23B8893B' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 58c0-16 6-28 18-36' fill='none' stroke='%23D9B45B' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M14 40c7-2 10-6 10-13 6 2 8 7 6 13-5 3-11 3-16 0Z' fill='%23D9B45B' opacity='.55'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.hero__corner--tl { top: 14px; left: 14px; }
.hero__corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.hero__corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.hero__corner--br { bottom: 14px; right: 14px; transform: scale(-1, -1); }

.hero__panel {
  position: relative;
  z-index: 2;
  padding: 34px 36px 32px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: #FFF9EF;
  box-shadow:
    inset 0 0 0 5px #FBF3E4,
    inset 0 0 0 6px rgba(184, 137, 59, 0.42),
    0 18px 38px rgba(74, 30, 47, 0.13);
}

.hero__panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--card);
  border-left: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
  border-radius: 4px 0 0 0;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--wine);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.hero__kicker-mark {
  color: var(--gold-deep);
  font-size: 14px;
  line-height: 1;
}

.hero__title {
  margin: 0;
  color: var(--wine);
  font-family: var(--font-display);
  font-size: clamp(48px, 6.2vw, 76px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 0 #FFFDF7,
    0 2px 0 var(--gold-hi),
    0 3px 0 rgba(184, 137, 59, 0.55),
    0 10px 20px rgba(74, 30, 47, 0.20);
}

.hero__subtitle {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.hero__lede {
  max-width: 34em;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.9;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.hero__actions .btn {
  min-width: 168px;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero__chips li {
  padding: 5px 13px;
  border: 1.5px solid rgba(184, 137, 59, 0.62);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 #FFFFFF;
}

/* ---- 右侧：柔和色环 + 椭圆 cameo ---- */

.hero__cameo-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 10px;
}

.cameo-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(108%, 540px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.52;
  background: conic-gradient(
    from -90deg,
    #EBC9C9 0deg 41deg,
    #FBF3E4 41deg 45deg,
    #C9B6D9 45deg 86deg,
    #FBF3E4 86deg 90deg,
    #A9BED6 90deg 131deg,
    #FBF3E4 131deg 135deg,
    #9CAF88 135deg 176deg,
    #FBF3E4 176deg 180deg,
    #EBC9C9 180deg 221deg,
    #FBF3E4 221deg 225deg,
    #C9B6D9 225deg 266deg,
    #FBF3E4 266deg 270deg,
    #A9BED6 270deg 311deg,
    #FBF3E4 311deg 315deg,
    #9CAF88 315deg 356deg,
    #FBF3E4 356deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 100%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59% 100%);
  filter: blur(0.3px);
}

.cameo-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(184, 137, 59, 0.45) 0deg 0.5deg,
    transparent 0.5deg 45deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 100%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59% 100%);
  opacity: 0.7;
}

.cameo-halo::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(184, 137, 59, 0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 8px rgba(251, 243, 228, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6);
}

.cameo-halo__moon {
  position: absolute;
  top: 4%;
  right: 5%;
  z-index: 2;
  width: 64px;
  height: 64px;
  color: var(--gold);
  filter: drop-shadow(0 3px 4px rgba(74, 30, 47, 0.22));
  animation: moon-float 7s ease-in-out infinite alternate;
}

.cameo-halo__moon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cameo-halo__star {
  position: absolute;
  z-index: 2;
  color: var(--gold-deep);
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 1px 0 #FFFDF7;
  animation: star-twinkle 4.4s ease-in-out infinite alternate;
}

.cameo-halo__star--1 { top: 15%; left: 8%; }
.cameo-halo__star--2 { bottom: 12%; right: 9%; font-size: 15px; animation-delay: 1.1s; }
.cameo-halo__star--3 { bottom: 21%; left: 6%; font-size: 13px; animation-delay: 2.2s; }

.cameo-halo__pearl {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFDF7 0 18%, #F3D99A 46%, #B8893B 100%);
  box-shadow: 0 0 0 1px rgba(138, 100, 39, 0.65), 0 2px 5px rgba(74, 30, 47, 0.24);
}

.cameo-halo__pearl--1 { top: 26%; left: 2%; }
.cameo-halo__pearl--2 { top: 9%; left: 27%; }
.cameo-halo__pearl--3 { bottom: 24%; right: 2%; }

.cameo {
  position: relative;
  z-index: 3;
  width: min(100%, 424px);
  margin: 26px 0 30px;
}

.cameo__frame {
  position: relative;
  aspect-ratio: 1 / 1.05;
  padding: 13px;
  border: 3px solid var(--gold);
  border-radius: 50% / 51%;
  background: linear-gradient(160deg, #FFFDF7, #F6E8D3);
  box-shadow:
    inset 0 0 0 2px #FFFDF7,
    inset 0 0 0 4px rgba(184, 137, 59, 0.35),
    0 0 0 2px #FFF9EF,
    0 0 0 5px rgba(184, 137, 59, 0.52),
    0 24px 48px rgba(74, 30, 47, 0.22);
}

.cameo__art {
  width: 100%;
  height: 100%;
  border-radius: 50% / 51%;
  overflow: hidden;
  background-color: #FFFDF7;
  background-image: var(--hero-image, url("/assets/bg.png"));
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: contrast(1.04) saturate(0.9);
}

.cameo__pearl {
  position: absolute;
  z-index: 4;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0 16%, #F3D99A 44%, #B8893B 100%);
  box-shadow: 0 0 0 1px rgba(138, 100, 39, 0.7), 0 3px 6px rgba(74, 30, 47, 0.28);
}

.cameo__pearl--1 { top: -7px; left: 25%; }
.cameo__pearl--2 { top: -13px; left: 43%; }
.cameo__pearl--3 { top: -13px; left: 58%; }
.cameo__pearl--4 { top: -6px; left: 75%; }
.cameo__pearl--5 { bottom: 3%; right: 8%; width: 11px; height: 11px; }

.cameo__ribbon {
  position: absolute;
  left: 50%;
  bottom: -24px;
  z-index: 5;
  margin: 0;
  padding: 9px 34px;
  transform: translateX(-50%);
  border: 2px solid var(--gold);
  border-radius: 4px;
  background: linear-gradient(180deg, #FFFDF7, #F3E4CB);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 6px 14px rgba(74, 30, 47, 0.18);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}

.cameo__ribbon::before,
.cameo__ribbon::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 22px;
  background: rgba(184, 137, 59, 0.16);
  z-index: -1;
}

.cameo__ribbon::before { left: 8px; }
.cameo__ribbon::after { right: 8px; }

.cameo__ribbon-text {
  display: block;
  color: var(--wine);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hero__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 940px;
  margin: 34px auto 0;
  color: var(--gold);
}

.hero__divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.hero__divider-line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero__divider-orn {
  flex: 0 0 auto;
  width: 250px;
  height: 52px;
}

/* --------------------------------------------------------------------------
   区块标题
   -------------------------------------------------------------------------- */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 24px 0;
}

.section__head {
  margin-bottom: 34px;
  text-align: center;
}

.section__kicker {
  margin: 0 0 8px;
  color: var(--wine);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.section__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 48px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 #FFFDF7, 0 2px 0 rgba(243, 217, 154, 0.55);
}

.section__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--gold);
}

.section__rule span {
  width: min(150px, 24vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section__rule span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section__rule svg {
  width: 120px;
  height: 30px;
  opacity: 0.92;
}

.section__hint {
  margin: 14px auto 0;
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   关于游戏：两张浮雕卡
   -------------------------------------------------------------------------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.story-card {
  position: relative;
  padding: 30px 32px 32px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 5px var(--card-2),
    inset 0 0 0 6px rgba(184, 137, 59, 0.32),
    0 16px 34px rgba(74, 30, 47, 0.11);
}

.story-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.story-card__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFDF7 0 12%, #F6E8D3 52%, #EBC9C9 100%);
  color: var(--wine);
  box-shadow:
    inset 0 0 0 3px #FFFDF7,
    inset 0 0 0 4px rgba(184, 137, 59, 0.32),
    0 3px 0 rgba(184, 137, 59, 0.26);
}

.story-card__badge svg {
  width: 30px;
  height: 30px;
}

.story-card__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
}

.story-card__text {
  color: #3B2A32;
  font-size: 17px;
  line-height: 1.95;
  white-space: pre-line;
}

.story-card__text--story {
  font-size: 17px;
  line-height: 2;
}

/* --------------------------------------------------------------------------
   游戏特色：魔女手札
   -------------------------------------------------------------------------- */

.grimoire {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  border: 2px solid var(--gold);
  border-radius: 18px;
  background: linear-gradient(180deg, #FFF9EF, #FBF3E4 70%, #F6E8D3);
  box-shadow:
    inset 0 0 0 6px var(--card-2),
    inset 0 0 0 7px rgba(184, 137, 59, 0.32),
    0 22px 48px rgba(74, 30, 47, 0.13);
  overflow: hidden;
}

.grimoire__spine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  border-right: 2px solid var(--gold);
  background:
    repeating-linear-gradient(0deg, rgba(243, 217, 154, 0.16) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, #5A2437, #8A4058 48%, #6B2F45);
  box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.18);
}

.grimoire__spine::before,
.grimoire__spine::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 4px;
  border-radius: 4px;
  background: var(--gold);
  opacity: 0.55;
}

.grimoire__spine::before { top: 16px; }
.grimoire__spine::after { bottom: 16px; }

.grimoire__spine-label {
  writing-mode: vertical-rl;
  color: #F3D99A;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.grimoire__page {
  padding: 30px 34px 34px;
}

.grimoire__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grimoire__seal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #FFFDF7, #F3D99A 58%, #D9B45B);
  color: var(--wine);
  box-shadow:
    inset 0 0 0 3px #FFFDF7,
    0 4px 10px rgba(74, 30, 47, 0.16);
}

.grimoire__seal svg {
  width: 34px;
  height: 34px;
}

.grimoire__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
}

.grimoire__hint {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 24px 0 0;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid rgba(184, 137, 59, 0.48);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 2px 6px rgba(74, 30, 47, 0.05);
}

.feature-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3l2.8 8.2L27 14l-8.2 2.8L16 25l-2.8-8.2L5 14l8.2-2.8z' fill='%23F3D99A' stroke='%236B2F45' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.feature-list li:nth-child(4n + 2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 3h6v4l3 4v13a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V11l3-4z' fill='%23FFFDF7' stroke='%236B2F45' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 16h12v9a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3z' fill='%23EBC9C9'/%3E%3Cpath d='M11 3h10' stroke='%236B2F45' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='20' r='1.6' fill='%236B2F45'/%3E%3C/svg%3E");
}

.feature-list li:nth-child(4n + 3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 8C13 5 9 4 5 5v20c4-1 8 0 11 3 3-3 7-4 11-3V5c-4-1-8 0-11 3z' fill='%23FFFDF7' stroke='%236B2F45' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M16 8v20' stroke='%236B2F45' stroke-width='1.4'/%3E%3Cpath d='M8 11h5M8 15h5M19 12h5M19 16h5' stroke='%23B8893B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.feature-list li:nth-child(4n + 4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20 4a12 12 0 1 0 0 24 9.5 9.5 0 1 1 0-24z' fill='%23F3D99A' stroke='%236B2F45' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='9' r='1.4' fill='%236B2F45'/%3E%3C/svg%3E");
}

.feature-list .empty {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  border-style: dashed;
  color: var(--ink-soft);
  font-size: 16px;
}

.feature-list .empty::before {
  content: none;
}

/* --------------------------------------------------------------------------
   宣传图：2×2 金色画框
   -------------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.gallery-item {
  position: relative;
  margin: 0;
  padding: 12px 12px 0;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 4px var(--card-2),
    inset 0 0 0 5px rgba(184, 137, 59, 0.30),
    0 14px 30px rgba(74, 30, 47, 0.12);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}

.gallery-item__button {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery-item__button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--paper-deep);
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

.gallery-item__button:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 4px;
}

.gallery-item figcaption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 12px -12px 0;
  padding: 11px 34px;
  background: var(--wine);
  color: #FFF7E8;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.02em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}

.gallery-item figcaption::before,
.gallery-item figcaption::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--gold-light);
  background: transparent;
}

.gallery-item figcaption::before { left: 22px; }
.gallery-item figcaption::after { right: 22px; }

.gallery-item figcaption:empty {
  display: none;
}

.gallery-item.is-broken .gallery-item__button {
  position: relative;
}

.gallery-item.is-broken .gallery-item__button::after {
  content: "图片加载失败";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--wine);
  font-size: 16px;
  font-weight: 700;
}

@media (hover: hover) {
  .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow:
      inset 0 0 0 4px var(--card-2),
      inset 0 0 0 5px rgba(184, 137, 59, 0.30),
      0 24px 44px rgba(74, 30, 47, 0.18);
  }

  .gallery-item:hover .gallery-item__button img {
    transform: scale(1.025);
  }
}

/* --------------------------------------------------------------------------
   联系与链接：烫金信件
   -------------------------------------------------------------------------- */

.letter {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 34px 38px 28px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(251, 243, 228, 0.96)),
    repeating-linear-gradient(0deg, rgba(184, 137, 59, 0.05) 0 1px, transparent 1px 30px);
  box-shadow:
    inset 0 0 0 6px var(--card-2),
    inset 0 0 0 7px rgba(184, 137, 59, 0.32),
    0 20px 44px rgba(74, 30, 47, 0.13);
}

.letter::before,
.letter::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  opacity: 0.55;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8c22 0 38 12 46 34' fill='none' stroke='%23B8893B' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 8c0 14 6 24 18 30' fill='none' stroke='%23D9B45B' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.letter::before { top: 14px; left: 14px; }
.letter::after { bottom: 14px; right: 14px; transform: rotate(180deg); }

.letter__seal {
  position: absolute;
  top: -27px;
  right: 34px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #A63348, #6B2F45 58%, #4A1E2F);
  color: #F3D99A;
  box-shadow:
    inset 0 0 0 3px rgba(243, 217, 154, 0.32),
    0 6px 14px rgba(74, 30, 47, 0.30);
  transform: rotate(-8deg);
}

.letter__seal svg {
  width: 34px;
  height: 34px;
}

.letter__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
}

.letter__note {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.8;
}

.link-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px dashed rgba(184, 137, 59, 0.65);
}

.link-item {
  border-bottom: 1px dashed rgba(184, 137, 59, 0.65);
}

.link-item__anchor {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 0.18s var(--ease);
}

.link-item__anchor:hover {
  background: rgba(243, 217, 154, 0.38);
  color: var(--ink);
  text-decoration: none;
}

.link-item__anchor:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 2px;
}

.link-item__arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--wine);
  color: #FFF7E8;
  font-size: 0;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 3px 0 rgba(74, 30, 47, 0.22);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.link-item__arrow::after {
  content: "打开 ↗";
  color: #FFF7E8;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.link-item__anchor:hover .link-item__arrow {
  background: var(--wine-hover);
  transform: translateY(-1px);
}

.link-item__plain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}

.link-item__plain::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(243, 217, 154, 0.55);
}

.empty {
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1.5px dashed var(--gold);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

/* --------------------------------------------------------------------------
   页脚 / 加载失败 / noscript
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 88px;
  border-top: 2px solid var(--gold);
  background: var(--paper-deep);
  box-shadow: inset 0 1px 0 #FFFDF7;
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px 32px;
  text-align: center;
}

.site-footer__orn {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-deep);
  font-size: 16px;
  line-height: 1;
}

.site-footer__copy {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

.site-footer__note {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}

.load-error {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 150;
  max-width: calc(100vw - 32px);
  padding: 14px 24px;
  transform: translateX(-50%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: #7A2333;
  color: #FFF7E8;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.no-script {
  max-width: 780px;
  margin: 24px auto;
  padding: 16px 20px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   灯箱
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 44px 24px;
  background: rgba(51, 35, 43, 0.90);
  backdrop-filter: blur(5px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  margin: 0;
  max-width: min(1120px, 86vw);
  padding: 14px 14px 0;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: var(--card);
  box-shadow:
    0 0 0 6px rgba(243, 217, 154, 0.16),
    0 30px 70px rgba(0, 0, 0, 0.45);
}

.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 6px;
  background: var(--paper-deep);
}

.lightbox__caption {
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--wine);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}

.lightbox__caption:empty {
  display: none;
}

.lightbox__close,
.lightbox__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--wine);
  color: #FFF7E8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--wine-hover);
  transform: scale(1.05);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 3px;
}

.lightbox__nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #7E6A72;
  transform: none;
}

/* --------------------------------------------------------------------------
   轻量动画
   -------------------------------------------------------------------------- */

@keyframes moon-float {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-9px) rotate(3deg); }
}

@keyframes star-twinkle {
  from { opacity: 0.45; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 34px;
  }

  .hero__panel {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .hero__cameo-wrap {
    min-height: 470px;
  }

  .cameo-halo {
    width: min(92%, 500px);
  }
}

@media (max-width: 860px) {
  .topbar__inner {
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 18px;
  }

  .topnav {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 2px;
  }

  .topnav__link {
    padding: 0 10px;
    font-size: 15.5px;
  }

  .topnav__cta {
    margin-left: 0;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    gap: 22px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 17px;
  }

  .hero {
    padding: 26px 14px 0;
  }

  .hero__stage {
    padding: 22px 18px;
    border-radius: 18px;
    box-shadow:
      inset 0 0 0 1px #FFFFFF,
      inset 0 0 40px rgba(217, 180, 91, 0.10),
      0 0 0 4px var(--paper),
      0 0 0 6px rgba(184, 137, 59, 0.42),
      0 18px 40px rgba(74, 30, 47, 0.13);
  }

  .hero__stage::before { inset: 7px; }
  .hero__corner { width: 40px; height: 40px; }
  .hero__corner--tl { top: 9px; left: 9px; }
  .hero__corner--tr { top: 9px; right: 9px; }
  .hero__corner--bl { bottom: 9px; left: 9px; }
  .hero__corner--br { bottom: 9px; right: 9px; }

  .hero__panel {
    padding: 26px 22px 24px;
    border-radius: 14px;
  }

  .hero__title {
    font-size: clamp(44px, 12vw, 58px);
  }

  .hero__subtitle {
    font-size: 19px;
  }

  .hero__lede {
    font-size: 16.5px;
    line-height: 1.9;
  }

  .hero__actions {
    gap: 12px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .hero__cameo-wrap {
    min-height: 400px;
    padding: 0;
  }

  .cameo {
    width: min(100%, 350px);
  }

  .cameo-halo {
    width: min(104%, 400px);
  }

  .cameo-halo__moon {
    width: 48px;
    height: 48px;
  }

  .cameo__ribbon {
    padding: 8px 24px;
  }

  .cameo__ribbon-text {
    font-size: 14.5px;
  }

  .hero__divider {
    margin-top: 24px;
    gap: 8px;
  }

  .hero__divider-orn {
    width: 160px;
    height: 40px;
  }

  .section {
    padding: 58px 16px 0;
  }

  .section__head {
    margin-bottom: 26px;
  }

  .section__rule span {
    width: 22vw;
  }

  .story-card {
    padding: 24px 22px 26px;
  }

  .story-card__title {
    font-size: 23px;
  }

  .grimoire {
    grid-template-columns: 1fr;
  }

  .grimoire__spine {
    height: 46px;
    padding: 0 16px;
    border-right: 0;
    border-bottom: 2px solid var(--gold);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.16);
  }

  .grimoire__spine::before,
  .grimoire__spine::after {
    top: 12px;
    bottom: auto;
    left: auto;
    width: 4px;
    height: auto;
  }

  .grimoire__spine::before { left: 16px; bottom: 12px; }
  .grimoire__spine::after { right: 16px; bottom: 12px; }

  .grimoire__spine-label {
    writing-mode: horizontal-tb;
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  .grimoire__page {
    padding: 24px 20px 26px;
  }

  .grimoire__seal {
    width: 52px;
    height: 52px;
  }

  .grimoire__seal svg {
    width: 30px;
    height: 30px;
  }

  .grimoire__title {
    font-size: 23px;
  }

  .feature-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-list li {
    padding: 13px 14px;
    font-size: 16.5px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .letter {
    padding: 28px 20px 22px;
  }

  .letter__seal {
    right: 20px;
    width: 56px;
    height: 56px;
  }

  .letter__title {
    font-size: 23px;
    padding-right: 48px;
  }

  .link-item__anchor {
    font-size: 16.5px;
  }

  .site-footer {
    margin-top: 64px;
  }

  .lightbox {
    gap: 8px;
    padding: 56px 10px 20px;
  }

  .lightbox__figure {
    max-width: 100%;
    padding: 10px 10px 0;
  }

  .lightbox__image {
    max-height: 64vh;
  }

  .lightbox__close {
    top: 10px;
    right: 10px;
  }

  .lightbox__close,
  .lightbox__nav {
    width: 46px;
    height: 46px;
    font-size: 23px;
  }
}

@media (max-width: 480px) {
  .brand__emblem {
    width: 42px;
    height: 42px;
  }

  .brand__name {
    font-size: 20px;
  }

  .brand__line {
    font-size: 13px;
  }

  .topnav__link {
    font-size: 15px;
    padding: 0 8px;
  }

  .topnav__cta {
    padding: 8px 14px;
    font-size: 14.5px;
  }

  .hero__kicker {
    font-size: 14.5px;
  }

  .hero__chips li {
    font-size: 13.5px;
  }

  .link-item__anchor {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 8px;
  }

  .link-item__arrow {
    margin-left: 0;
    width: 100%;
  }

  .link-item__arrow::after {
    font-size: 16px;
  }

  .lightbox__caption {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* --------------------------------------------------------------------------
   Mobile hardening · 保证文字换行、按钮不溢出
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .hero, .hero__inner, .hero__stage, .hero__panel, .hero__cameo-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero__panel { padding-left: 16px; padding-right: 16px; }
  .hero__lede, .card__text, .feature-list li,
  .link-item__anchor, .link-item__plain, .gallery-item figcaption {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hero__actions .btn { width: 100%; min-width: 0; }
  .hero__chips { gap: 6px; }
  .topbar__inner { flex-wrap: wrap; }
  .topbar__inner .btn { max-width: 100%; }
  .section, .section__head, .info-grid, .gallery-grid, .link-list, .panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .gallery-item, .link-item { width: 100%; }
  .lightbox__figure { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   可读性硬性修正 · 正文与控件文字不小于 16px
   （覆盖移动端为省空间而下调的字号）
   -------------------------------------------------------------------------- */
.brand__line,
.hero__kicker,
.hero__chips li,
.section__kicker,
.section__hint,
.grimoire__hint,
.cameo__ribbon-text,
.gallery-item figcaption,
.site-footer__copy,
.site-footer__note,
.lightbox__caption,
.topnav__link,
.topnav__cta,
.btn--small,
.link-item__arrow::after {
  font-size: 16px;
}


/* ===== 最终修正：去色环、换中世纪拱窗、保证文字清晰 ===== */
.cameo-halo {
  background: radial-gradient(circle, rgba(243, 217, 154, 0.55), rgba(235, 201, 201, 0.18) 52%, transparent 68%);
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  filter: none;
}
.cameo-halo::before, .cameo-halo::after { display: none; }

.cameo { width: min(100%, 360px); }

.cameo__frame {
  aspect-ratio: 3 / 4;
  padding: 12px;
  border: 9px solid #E7D9C2;
  border-radius: 48% 48% 10px 10px / 30% 30% 10px 10px;
  background: linear-gradient(160deg, #F3E8D6, #DCCBB2);
  box-shadow:
    0 0 0 3px #B8893B,
    inset 0 0 0 2px #FFFDF7,
    inset 0 0 0 5px rgba(184, 137, 59, 0.35),
    0 22px 44px rgba(74, 30, 47, 0.22);
}

.cameo__art {
  border-radius: 46% 46% 8px 8px / 29% 29% 8px 8px;
}

.cameo__pillar {
  position: absolute;
  top: 16%;
  bottom: 8%;
  width: 14px;
  z-index: 5;
  border: 1px solid #B8893B;
  border-radius: 5px;
  background: linear-gradient(90deg, #EFE3D0, #C9B79A 45%, #EFE3D0);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 6px rgba(74, 30, 47, 0.18);
}
.cameo__pillar::before,
.cameo__pillar::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  height: 9px;
  border: 1px solid #8A6427;
  border-radius: 3px;
  background: linear-gradient(180deg, #F3D99A, #B8893B);
}
.cameo__pillar::before { top: -5px; }
.cameo__pillar::after { bottom: -5px; }
.cameo__pillar--left { left: -17px; }
.cameo__pillar--right { right: -17px; }

.cameo__keystone {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 6;
  width: 26px;
  height: 26px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid #8A6427;
  background: linear-gradient(145deg, #F3D99A, #B8893B);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 8px rgba(74, 30, 47, 0.25);
}

.cameo__base {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  z-index: 5;
  height: 14px;
  border: 2px solid #B8893B;
  border-radius: 4px;
  background: linear-gradient(180deg, #EFE3D0, #C9B79A);
  box-shadow: inset 0 1px 0 #FFFFFF;
}

.cameo__ribbon, .cameo__pearl { display: none; }

.hero__title {
  text-shadow: 0 1px 0 #FFFDF7, 0 2px 0 var(--gold-hi), 0 4px 10px rgba(74, 30, 47, 0.16);
}
.hero__actions { margin-top: 28px; }
.hero__panel { padding-bottom: 30px; }

.edit-entry {
  display: none;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--card);
  color: var(--wine);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
body[data-mode="admin"] .edit-entry { display: inline-flex; }
.edit-entry:hover { background: var(--gold-hi); }


/* ===== 平铺背景 · 去掉门户式大框 ===== */
html {
  background-color: var(--paper);
  background-image: url("/assets/bg.png");
  background-repeat: repeat;
  background-size: 720px auto;
  background-attachment: fixed;
}
body {
  min-height: 100vh;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(251, 243, 228, 0.82), rgba(246, 232, 211, 0.86));
}

.hero { padding: 30px 24px 8px; }

.hero__stage {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero__stage::before,
.hero__stage::after { display: none; }

.hero__panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 38px 32px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  background: rgba(255, 249, 239, 0.95);
  box-shadow: var(--shadow-card);
}
.hero__panel::before { display: none; }

.hero__cameo-wrap, .cameo, .cameo-halo { display: none; }
.hero__corner { display: none; }
.hero__divider { margin-top: 18px; }

@media (max-width: 720px) {
  .hero { padding: 18px 14px 6px; }
  .hero__panel { padding: 24px 18px; border-radius: 16px; }
}


/* 小提示在平铺背景上保持清晰 */
.section__hint {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(184, 137, 59, 0.45);
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.92);
  color: var(--ink-soft);
}


/* ===== 修正：背景图只放在标题区，不平铺、不重复、按宽度缩放 ===== */
html {
  background-color: var(--paper);
  background-image: none;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 10% 6%, rgba(235, 201, 201, 0.22), transparent 28%),
    radial-gradient(circle at 92% 3%, rgba(201, 182, 217, 0.18), transparent 26%),
    repeating-linear-gradient(0deg, rgba(184, 137, 59, 0.025) 0 1px, transparent 1px 28px);
  background-repeat: no-repeat, no-repeat, repeat;
}

.hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(251, 243, 228, 0.80), rgba(246, 232, 211, 0.92)),
    url("/assets/bg.png");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, 100% auto;
  background-position: center top, center top;
}


/* ===== 最终：完整标题横幅图，单次显示、不裁切、不淡化 ===== */
.hero {
  padding: 0 24px 16px;
  background-image: none;
  background-color: var(--paper);
}
.hero__banner {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--gold);
  border-radius: 16px;
  background: var(--paper);
}
.hero__inner { margin-top: 18px; }
.hero__stage { padding: 0; border: 0; background: transparent; box-shadow: none; }
.hero__panel { margin: 0 auto; }
.hero__divider { margin-top: 20px; }
.edit-entry { display: inline-flex; }
@media (max-width: 720px) {
  .hero { padding: 0 12px 10px; }
  .hero__banner { border-radius: 12px; }
  .hero__inner { margin-top: 12px; }
}


/* 宣传图完整显示，不裁掉另一半 */
.gallery-item img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--paper-deep, #F6E8D3);
}


/* ===== 底图修正：只做标题区 CSS 背景，单次、完整、不淡化 ===== */
.hero__banner { display: none; }
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(520px, 70vw, 900px);
  padding: 0 24px 8px;
  background-color: var(--paper);
  background-image: url("/assets/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.hero__inner { width: 100%; margin: 0; }
.hero__panel { margin: 0 auto; }
.hero__divider { margin-top: 18px; }
@media (max-width: 720px) {
  .hero { min-height: 520px; padding: 0 12px 6px; background-position: center top; }
  .hero__panel { margin-top: 0; }
}


/* 底图之上：标题面板必须完全不透明，保证文字清晰 */
.hero__panel {
  background: var(--card);
  background-image: none;
  backdrop-filter: none;
}


/* 标题面板透明度：200/255 ≈ 0.784，不是全不透明 */
.hero__panel {
  background: rgba(255, 249, 239, 0.784);
}


/* ==========================================================================
   标题区审美返工 · 中世纪手抄本 + 洛可可 + 浮雕（2026-10-21）
   仅标题区装饰；.hero 背景规则与面板 200/255 透明度保持不变
   ========================================================================== */

.hero__panel {
  padding: 40px 44px 34px;
  border: 1px solid rgba(184, 137, 59, 0.9);
  border-radius: 14px;
  background: rgba(255, 249, 239, 0.784);
  text-align: center;
  box-shadow:
    inset 0 1px 0 #FFFDF7,
    inset 0 -1px 0 rgba(74, 30, 47, 0.08),
    0 0 0 3px rgba(255, 253, 247, 0.62),
    0 0 0 4px rgba(184, 137, 59, 0.32),
    0 2px 0 rgba(184, 137, 59, 0.16),
    0 22px 44px rgba(74, 30, 47, 0.18);
}

/* 手抄本内框：双层细线，克制不抢字 */
.hero__panel::before {
  content: "";
  display: block;
  position: absolute;
  inset: 9px;
  width: auto;
  height: auto;
  transform: none;
  border: 1px solid rgba(184, 137, 59, 0.45);
  border-radius: 8px;
  background: none;
  box-shadow: inset 0 0 0 3px rgba(255, 253, 247, 0.4);
  pointer-events: none;
}

/* 四角金色小括线：手抄本装订感 */
.hero__panel::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(180deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(90deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(180deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(90deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(180deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(90deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6)),
    linear-gradient(180deg, rgba(184, 137, 59, 0.6), rgba(184, 137, 59, 0.6));
  background-repeat: no-repeat;
  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* 眉饰：金色细线 + 卷草纹 */
.hero__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 290px;
  margin: 0 auto 14px;
  color: var(--gold);
}

.hero__crest-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 137, 59, 0), rgba(138, 100, 39, 0.95));
  box-shadow: 0 1px 0 rgba(255, 253, 247, 0.55);
}

.hero__crest-rule:last-child {
  background: linear-gradient(90deg, rgba(138, 100, 39, 0.95), rgba(184, 137, 59, 0));
}

.hero__crest-orn {
  flex: 0 0 auto;
  width: 96px;
  height: 24px;
  color: var(--gold-deep);
}

/* 主标题：居中、字距拉开、浅浮雕 */
.hero__title {
  margin: 0;
  color: var(--wine-deep);
  font-size: clamp(46px, 6.4vw, 82px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0.07em;
  text-indent: 0.07em;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 0 12px rgba(255, 249, 239, 0.4),
    0 1px 0 rgba(255, 253, 247, 0.95),
    0 2px 0 rgba(243, 217, 154, 0.62),
    0 3px 2px rgba(184, 137, 59, 0.18),
    0 14px 26px rgba(74, 30, 47, 0.16);
}

.hero__subtitle {
  margin: 12px 0 0;
  color: var(--wine-deep);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: center;
  text-shadow:
    0 0 2px rgba(255, 253, 247, 0.95),
    0 1px 0 rgba(255, 253, 247, 0.95),
    0 0 12px rgba(255, 249, 239, 0.85);
}

/* 副标题下的细线菱饰 */
.hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 210px;
  margin: 18px auto 0;
  color: var(--gold);
}

.hero__rule-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 137, 59, 0), rgba(184, 137, 59, 0.75));
}

.hero__rule-line:last-child {
  background: linear-gradient(90deg, rgba(184, 137, 59, 0.75), rgba(184, 137, 59, 0));
}

.hero__rule-diamond {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 253, 247, 0.75);
}

.hero__actions {
  justify-content: center;
  margin-top: 24px;
}

.hero__actions .btn {
  min-width: 172px;
  min-height: 50px;
}

@media (max-width: 720px) {
  .hero__panel {
    padding: 30px 20px 26px;
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 #FFFDF7,
      inset 0 -1px 0 rgba(74, 30, 47, 0.08),
      0 0 0 3px rgba(255, 253, 247, 0.6),
      0 0 0 4px rgba(184, 137, 59, 0.28),
      0 14px 30px rgba(74, 30, 47, 0.16);
  }

  .hero__panel::before {
    inset: 7px;
    border-radius: 9px;
  }

  .hero__panel::after {
    inset: 10px;
    background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  }

  .hero__crest {
    gap: 9px;
    max-width: 230px;
    margin-bottom: 12px;
  }

  .hero__crest-orn {
    width: 84px;
    height: 21px;
  }

  .hero__title {
    font-size: clamp(42px, 12vw, 56px);
    letter-spacing: 0.05em;
    text-indent: 0.05em;
  }

  .hero__subtitle {
    font-size: 18px;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }



  .hero__rule {
    max-width: 170px;
    margin-top: 15px;
    gap: 8px;
  }

  .hero__actions {
    margin-top: 20px;
  }
}


/* 最终修正：底图跟随 app.js 的 heroImage；移动端导航不拆字 */
.hero {
  background-image: var(--hero-image, url("/assets/bg.png"));
}
@media (max-width: 720px) {
  .topbar__inner { flex-wrap: wrap; gap: 8px 12px; }
  .topnav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 10px;
  }
  .topnav__link,
  .topnav__cta,
  .edit-entry {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .topnav__cta,
  .edit-entry { padding-left: 12px; padding-right: 12px; }
}


/* 标题块强制居中，避免受父级布局影响 */
.hero__stage {
  display: flex;
  justify-content: center;
}
.hero__panel {
  flex: 0 1 760px;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .hero__panel { flex-basis: 100%; max-width: 100%; }
}


/* 标题块居中后：只模糊面板背后的底图原字，避免双标题；面板透明度仍为 200/255 */
.hero__panel {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}


/* 标题块背后的底图原字再压一层，避免双标题 */
.hero__panel {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}