/* ── 站点样式 ─────────────────────────────────────────────
   签名装置：每一节都由两个声音开场。
   希儿是外放的那句（青蓝、细宋体、宽字距），
   黑希儿是心里的那句（猩红、无衬线、缩进回话）。
   ──────────────────────────────────────────────────────── */

.wrap {
  width: var(--page);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--deep);
  border: 1px solid var(--line-strong);
}

/* ── 氛围层 ───────────────────────────────────────────── */
#atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

/* 背景图：桌面「网页素材图片」里的横版图，压得低一点垫在绀海下面 */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: url('../assets/deco/bg.jpg') center / cover no-repeat;
  opacity: 0.26;
  pointer-events: none;
}

/* 蝴蝶与星点装饰，浮在内容层的后面 */
.deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.deco__fly {
  position: absolute;
  opacity: 0.5;
  animation: floaty 8s ease-in-out infinite;
}
.deco__fly--1 {
  left: 6%;
  top: 17%;
  width: 46px;
  color: var(--azure);
}
.deco__fly--2 {
  right: 8%;
  top: 44%;
  width: 30px;
  color: var(--crimson-soft);
  animation-delay: -3s;
  animation-duration: 10s;
}
.deco__fly--3 {
  left: 11%;
  bottom: 13%;
  width: 38px;
  color: var(--azure-soft);
  animation-delay: -5.5s;
  animation-duration: 9s;
}
.deco__star {
  position: absolute;
  color: var(--azure);
  font-size: 15px;
  opacity: 0.4;
  animation: twinkle 4.5s ease-in-out infinite;
}
.deco__star--1 {
  right: 13%;
  top: 11%;
}
.deco__star--2 {
  left: 19%;
  bottom: 26%;
  font-size: 11px;
  color: var(--crimson-soft);
  animation-delay: -2s;
}
.deco__fly--4 {
  right: 22%;
  top: 8%;
  width: 26px;
  color: var(--azure-soft);
  animation-delay: -1.5s;
  animation-duration: 11s;
}
.deco__fly--5 {
  left: 42%;
  bottom: 8%;
  width: 34px;
  color: var(--azure);
  animation-delay: -7s;
  animation-duration: 12s;
}
.deco__star--3 {
  right: 32%;
  bottom: 34%;
  font-size: 12px;
  animation-delay: -3.2s;
}
.deco__star--4 {
  left: 6%;
  top: 46%;
  font-size: 13px;
  color: var(--crimson-soft);
  animation-delay: -1.1s;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.15);
  }
}
@media (max-width: 720px) {
  .deco__fly {
    opacity: 0.35;
  }
  .deco__fly--3,
  .deco__star--2 {
    display: none;
  }
}

/* Q 版希儿装饰（也是跑酷游戏的主角） */
.hero__chibi {
  position: absolute;
  right: clamp(0px, 5vw, 70px);
  top: 15%;
  width: clamp(96px, 17vw, 180px);
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(0 12px 34px rgba(116, 180, 255, 0.28));
  animation: floaty 7s ease-in-out infinite;
}
.gate__chibi {
  display: block;
  width: 118px;
  margin: 1.4rem auto 0;
  filter: drop-shadow(0 10px 26px rgba(116, 180, 255, 0.3));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0) rotate(-2.5deg);
  }
  50% {
    transform: translateY(-13px) rotate(2.5deg);
  }
}
@media (max-width: 720px) {
  .hero__chibi {
    width: 88px;
    opacity: 0.6;
    right: 2vw;
    top: 11%;
  }
}

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.74);
  backdrop-filter: blur(14px) saturate(140%);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 62px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--silk);
}
.brand__zh {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.22em;
}
.brand__en {
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--faint);
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  display: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--ash);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav__link:hover {
  color: var(--silk);
  border-color: var(--line);
}
.nav__link[aria-current='page'] {
  color: var(--azure);
  border-color: var(--line-strong);
}
.nav__quip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  max-width: 20ch;
  padding: 0.3rem 0.5rem;
  border-right: 2px solid var(--crimson);
  background: rgba(44, 60, 124, 0.97);
  color: var(--crimson-soft);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: right;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__link:hover .nav__quip,
.nav__link:focus-visible .nav__quip {
  opacity: 1;
  transform: none;
}

.who {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.who__name {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}
.who__title {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line-strong);
  color: var(--azure-soft);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

/* ── 按钮 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.58rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--azure);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.btn:hover:not(:disabled) {
  background: rgba(116, 180, 255, 0.11);
  border-color: var(--azure);
  color: var(--azure-soft);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn--fill {
  background: var(--azure);
  border-color: var(--azure);
  color: #04101f;
  font-weight: 600;
}
.btn--fill:hover:not(:disabled) {
  background: var(--azure-soft);
  border-color: var(--azure-soft);
  color: #04101f;
}
.btn--quiet {
  border-color: transparent;
  color: var(--ash);
}
.btn--quiet:hover:not(:disabled) {
  color: var(--silk);
  border-color: var(--line);
  background: none;
}
.btn--vil {
  border-color: var(--crimson-dim);
  color: var(--crimson-soft);
}
.btn--vil:hover:not(:disabled) {
  background: rgba(255, 61, 95, 0.12);
  border-color: var(--crimson);
  color: var(--crimson-soft);
}
.btn--sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}
.btn--wide {
  width: 100%;
}

/* ── 两个声音 ─────────────────────────────────────────── */
.voices {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.voices--tight {
  margin-top: 0.9rem;
}

.voice {
  position: relative;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--azure-soft);
}

.voice--vil {
  margin-left: 2.4ch;
  padding-left: 0.85rem;
  border-left-color: var(--crimson-dim);
  border-left-style: solid;
  font-family: var(--f-body);
  font-size: clamp(0.86rem, 1.9vw, 0.98rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--crimson-soft);
}
.voice--vil::before {
  content: '—';
  margin-right: 0.45em;
  color: var(--crimson-dim);
}

/* 旁白（游戏结算、空状态等地方的一句） */
.voice--aside {
  margin-left: 0;
  padding-left: 0;
  border: 0;
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: var(--faint);
  letter-spacing: 0.05em;
}

/* ── 区块标题 ─────────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.scene-head {
  margin-bottom: 2.6rem;
}
.scene-head__title {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.35;
}

.page {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 7rem);
}

/* ── 门厅 ─────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 62px);
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 6rem);
}
/* 门厅背后的柔光，让大字像浮在水面上 */
.hero::before {
  content: '';
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 38% at 28% 40%, rgba(150, 200, 255, 0.24), transparent 70%),
    radial-gradient(34% 30% at 76% 66%, rgba(255, 150, 180, 0.14), transparent 72%);
}

.hero__name {
  font-family: var(--f-display);
  font-size: clamp(4.6rem, 21vw, 15rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: 0.1em;
  background: linear-gradient(178deg, var(--silk) 6%, var(--azure-soft) 52%, var(--azure-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__latin {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-size: clamp(0.78rem, 2vw, 1rem);
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero__intro {
  max-width: 34ch;
  margin-top: 2.2rem;
  color: var(--ash);
  font-size: 0.98rem;
  line-height: 1.95;
}

/* ── 倒计时 ───────────────────────────────────────────── */
.count {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.count__label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
}
.count__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.2rem, 4vw, 2.8rem);
  margin-top: 0.9rem;
}
.count__cell {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.count__num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--silk);
}
.count__unit {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.count__today {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--azure-soft);
}
.count__today small {
  font-family: var(--f-body);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--crimson-soft);
}
.count__meta {
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* ── 房间门（首页通往各节） ───────────────────────────── */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.door {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.4rem;
  background: var(--abyss);
  text-align: left;
  border: 0;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.door:hover {
  background: var(--deep);
}
.door__name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--silk);
}
.door__desc {
  font-size: 0.83rem;
  color: var(--ash);
  line-height: 1.7;
}
.door__tarot {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--crimson-soft);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.door:hover .door__tarot,
.door:focus-visible .door__tarot {
  opacity: 1;
  transform: none;
}

/* ── 影像室 ───────────────────────────────────────────── */
.cinema {
  margin-top: 3rem;
}
.cinema__stage {
  position: relative;
  margin-top: 1rem;
  aspect-ratio: 16 / 9;
  max-height: 540px;
  border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 50% 0%, #34488e 0%, #1a2755 70%);
  overflow: hidden;
}
.cinema__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cinema__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: none;
  color: var(--ash);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.cinema__placeholder:hover {
  color: var(--silk);
}
.cinema__play-glyph {
  font-size: 2.4rem;
  color: var(--azure);
}
.cinema__controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.cinema__now {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 0;
}
.cinema__now b {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--silk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cinema__now span {
  font-size: 0.78rem;
  color: var(--faint);
}
.cinema__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-top: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--faint);
}
.cinema__src {
  margin-left: auto;
  letter-spacing: 0.05em;
}
@media (max-width: 720px) {
  .cinema__src {
    margin-left: 0;
    width: 100%;
  }
}

/* ── 面板 ─────────────────────────────────────────────── */
.panel {
  position: relative;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(56, 78, 152, 0.5), rgba(26, 38, 84, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(200, 226, 255, 0.12),
    0 10px 30px rgba(6, 12, 34, 0.28);
}
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--azure-dim);
  opacity: 0.75;
  pointer-events: none;
}
.panel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.panel::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}
.panel__pad {
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 答题 ─────────────────────────────────────────────── */
.quiz__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--faint);
}
.track {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.track__fill {
  height: 100%;
  background: var(--azure);
  transition: width 0.4s var(--ease);
}

.quiz__q {
  margin-top: 1.8rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.6;
}

.opts {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.7rem;
}
.opt {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.5);
  color: var(--silk);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.opt:hover {
  border-color: var(--line-strong);
  background: rgba(52, 72, 148, 0.6);
}
.opt__key {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--azure);
  padding-top: 0.15rem;
}
.opt__text {
  font-size: 0.95rem;
  line-height: 1.6;
}
.opt[aria-pressed='true'] {
  border-color: var(--azure);
  background: rgba(116, 180, 255, 0.12);
}
.opt.is-right {
  border-color: #3f9a6a;
  background: rgba(63, 154, 106, 0.14);
}
.opt.is-wrong {
  border-color: var(--crimson);
  background: rgba(255, 61, 95, 0.12);
}
.opt:disabled {
  cursor: default;
}

.review {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.review__item {
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.4);
}
.review__item > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  font-size: 0.9rem;
  list-style: none;
}
.review__item > summary::-webkit-details-marker {
  display: none;
}
.review__mark {
  flex: none;
  width: 1.4rem;
  font-family: var(--f-mono);
  font-size: 0.9rem;
}
.review__item[data-ok='1'] .review__mark {
  color: #56c48a;
}
.review__item[data-ok='0'] .review__mark {
  color: var(--crimson);
}
.review__body {
  padding: 0 0.95rem 1rem 3.1rem;
  font-size: 0.88rem;
  color: var(--ash);
  line-height: 1.8;
}
.review__body b {
  color: var(--azure-soft);
  font-weight: 400;
}

.result__score {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--silk);
}
.result__score span {
  font-size: 0.3em;
  color: var(--faint);
  letter-spacing: 0.1em;
}
.result__title {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--azure-soft);
}

/* ── 排行榜 ───────────────────────────────────────────── */
.board-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.board-list__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.68rem 1rem;
  background: var(--abyss);
  font-size: 0.88rem;
}
.board-list__row.is-me {
  background: rgba(116, 180, 255, 0.08);
}
.board-list__rank {
  flex: none;
  width: 2ch;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--faint);
  text-align: right;
}
.board-list__row:nth-child(1) .board-list__rank {
  color: var(--azure);
}
.board-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.board-list__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--azure-soft);
}
.board-list__sub {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--faint);
}
.aside-title {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.empty {
  padding: 1.6rem 1rem;
  border: 1px dashed var(--line);
  color: var(--faint);
  font-size: 0.88rem;
  text-align: center;
}

/* ── 信箱 ─────────────────────────────────────────────── */
.composer__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.7rem;
}
.field {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(34, 48, 104, 0.55);
  color: var(--silk);
  font-size: 0.95rem;
  line-height: 1.7;
  resize: vertical;
  transition: border-color 0.2s var(--ease);
}
.field::placeholder {
  color: var(--faint);
}
.field:focus {
  border-color: var(--azure);
  outline: none;
}
.field--area {
  min-height: 116px;
}
.composer__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
}
.counter {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--faint);
}
.counter.is-over {
  color: var(--crimson);
}

.msgs {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.msg {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  background: var(--abyss);
  transition: background 0.25s var(--ease);
}
.msg:hover {
  background: var(--deep);
}
.msg__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--azure-soft);
}
.msg__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.84rem;
}
.msg__name {
  letter-spacing: 0.08em;
  color: var(--silk);
}
.msg__badge {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  color: var(--azure);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.msg__time {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--faint);
}
.msg__text {
  margin-top: 0.5rem;
  font-size: 0.96rem;
  line-height: 1.85;
  color: #d5deff;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg__acts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.like {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  background: none;
  color: var(--ash);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.like:hover {
  border-color: var(--line-strong);
  color: var(--silk);
}
.like[aria-pressed='true'] {
  border-color: var(--crimson-dim);
  color: var(--crimson-soft);
}
.like__glyph {
  font-size: 0.7rem;
}

/* ── 游戏 ─────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.tab {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 0;
  background: var(--abyss);
  color: var(--ash);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.tab:hover {
  color: var(--silk);
  background: var(--deep);
}
.tab[aria-selected='true'] {
  color: var(--azure);
  background: rgba(116, 180, 255, 0.1);
}

.stage {
  position: relative;
  margin-top: 1.2rem;
  min-height: 380px;
  border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 50% 0%, #34488e 0%, #1a2755 70%);
  overflow: hidden;
  touch-action: none;
}
.stage canvas {
  display: block;
  width: 100%;
  height: auto;
}
.stage__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  justify-items: center;
  padding: 2rem;
  text-align: center;
  background: rgba(28, 42, 94, 0.9);
  backdrop-filter: blur(4px);
}
.stage__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.2em;
}
.stage__note {
  max-width: 32ch;
  font-size: 0.86rem;
  color: var(--ash);
  line-height: 1.8;
}
.hud {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-top: 0;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ash);
}
.hud b {
  color: var(--silk);
  font-weight: 400;
}
.hud__spacer {
  margin-left: auto;
}

.memory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 1.2rem;
  min-height: 340px;
  align-content: start;
}
@media (max-width: 560px) {
  .memory {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  position: relative;
  height: 200px;
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.55);
  cursor: pointer;
  perspective: 700px;
  padding: 0;
  overflow: hidden;
}
/* 支持 aspect-ratio 的浏览器用比例撑高，不支持的退回上面的固定高度 */
@supports (aspect-ratio: 3 / 4) {
  .card {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}
.card__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: transform 0.42s var(--ease), opacity 0.3s var(--ease);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card__back {
  background: url('../assets/deco/card-back-royal.svg') center / cover no-repeat,
    linear-gradient(160deg, #34488e, #1a2755);
}
.card__front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: rotateY(180deg);
  /* 不用 3D 兜底：没翻开时直接不透明，任何浏览器都不会露馅 */
  opacity: 0;
  background: linear-gradient(160deg, #34488e, #1a2755);
}
.card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__symbol {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: 2.2rem;
  color: var(--azure-soft);
}
.card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.24rem 0.5rem;
  background: rgba(10, 16, 38, 0.8);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--silk);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.is-open .card__front {
  transform: none;
  opacity: 1;
  animation: card-flip-open 0.5s var(--ease) both;
}
.card.is-open .card__back {
  transform: rotateY(-180deg);
  opacity: 0;
  animation: card-back-away 0.5s var(--ease) both;
}
@keyframes card-flip-open {
  0% {
    opacity: 0;
    transform: scaleX(0.08) scaleY(0.9);
    filter: brightness(2.2);
  }
  55% {
    opacity: 1;
    transform: scaleX(1.06) scaleY(1.04);
    filter: brightness(1.45);
    box-shadow: 0 0 22px rgba(116, 180, 255, 0.5);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(116, 180, 255, 0);
  }
}
@keyframes card-back-away {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0.12);
  }
}
.card.is-done {
  border-color: var(--azure);
  cursor: default;
}
.card:disabled {
  cursor: default;
}

/* ── 画室 ─────────────────────────────────────────────── */
.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.filters .aside-title {
  margin-bottom: 0;
}
.chip {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  background: none;
  color: var(--ash);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover {
  color: var(--silk);
  border-color: var(--line-strong);
}
.chip[aria-pressed='true'] {
  color: var(--azure);
  border-color: var(--azure);
  background: rgba(116, 180, 255, 0.1);
}

.gallery {
  columns: 3 250px;
  column-gap: 1rem;
}
.gallery__item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  background: var(--deep);
  cursor: zoom-in;
  padding: 0;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
  /* 先藏着，等图片真正加载出来再发牌——手机上网络慢时尤其重要 */
  opacity: 0;
}
.gallery__item.is-dealt {
  /* 发牌入场：像把牌一张张甩到桌上 */
  animation: deal 0.62s cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
  animation-delay: calc(var(--deal, 0) * 55ms);
}
@keyframes deal {
  0% {
    opacity: 0;
    transform: translateY(-48px) rotate(-8deg) scale(0.72);
    filter: brightness(2.4);
    box-shadow: 0 0 0 rgba(116, 180, 255, 0);
  }
  45% {
    opacity: 1;
    filter: brightness(1.5);
  }
  70% {
    transform: translateY(4px) rotate(1.5deg) scale(1.02);
    box-shadow: 0 0 26px rgba(116, 180, 255, 0.45);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(116, 180, 255, 0);
  }
}
.gallery__item:hover {
  border-color: var(--line-strong);
}
.gallery__item img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.gallery__item:hover img {
  transform: scale(1.03);
}
.gallery__cap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.gallery__cap b {
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--silk);
  letter-spacing: 0.06em;
}
.gallery__cap span {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.badge {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.badge--official {
  color: var(--azure);
  border-color: var(--azure-dim);
}
.badge--user {
  color: var(--crimson-soft);
  border-color: var(--crimson-dim);
}
.badge--gif {
  color: var(--azure-soft);
  border-color: var(--line-strong);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(3, 6, 14, 0.94);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] {
  display: none;
}
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--line-strong);
}
.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ash);
}
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
}

/* ── 登录门 ───────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(120% 90% at 70% 0%, #2c3f86 0%, #16224c 60%);
}
.gate[hidden] {
  display: none;
}
.gate__box {
  width: min(520px, 100%);
}
.gate__name {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 14vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.14em;
  background: linear-gradient(178deg, var(--silk), var(--azure-soft) 60%, var(--azure-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate__date {
  margin-top: 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: var(--faint);
}
.gate__form {
  margin-top: 2.4rem;
}
.gate__form .field {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.gate__row {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.advanced {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--faint);
}
.advanced > summary {
  cursor: pointer;
  color: var(--faint);
  letter-spacing: 0.06em;
}
.advanced > summary:hover {
  color: var(--ash);
}
.advanced__body {
  padding-top: 0.9rem;
  color: var(--ash);
  line-height: 1.75;
}
.err {
  margin-top: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid var(--crimson);
  background: rgba(255, 61, 95, 0.08);
  color: var(--crimson-soft);
  font-size: 0.86rem;
}
.err[hidden] {
  display: none;
}

/* ── 开场幕布 ─────────────────────────────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 70% 0%, rgba(34, 49, 110, 0.94), rgba(13, 21, 51, 0.97));
  transition: transform 0.75s var(--ease), opacity 0.75s var(--ease);
  cursor: pointer;
}
.curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../assets/deco/bg.jpg') center / cover no-repeat;
  opacity: 0.28;
}
.curtain.is-open {
  transform: translateY(-100%);
  opacity: 0.4;
  pointer-events: none;
}
.curtain__inner {
  text-align: center;
  padding: 2rem;
  user-select: none;
}
.curtain__kicker {
  font-family: var(--f-mono);
  letter-spacing: 0.5em;
  color: var(--azure);
  font-size: 0.85rem;
}
.curtain__title {
  font-family: var(--f-display);
  font-size: clamp(4rem, 18vw, 9rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.18em;
  background: linear-gradient(178deg, var(--silk), var(--azure-soft) 60%, var(--azure-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.curtain__chibi {
  width: clamp(90px, 18vw, 150px);
  margin: 1.2rem auto 0;
  filter: drop-shadow(0 10px 26px rgba(116, 180, 255, 0.35));
  animation: floaty 7s ease-in-out infinite;
}
.curtain__hint {
  margin-top: 1.7rem;
  color: var(--ash);
  letter-spacing: 0.3em;
  font-size: 0.9rem;
}
.curtain__arrow {
  display: inline-block;
  margin-right: 0.4em;
  color: var(--azure);
  font-size: 1.4rem;
  animation: nudge-up 1.6s ease-in-out infinite;
}
.curtain__open {
  margin-top: 1.5rem;
}
@keyframes nudge-up {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-9px);
    opacity: 1;
  }
}

/* ── 提示条 ───────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 95;
  transform: translate(-50%, 1.5rem);
  max-width: min(460px, 90vw);
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line-strong);
  background: rgba(44, 60, 124, 0.97);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.is-bad {
  border-color: var(--crimson);
  color: var(--crimson-soft);
}

/* ── 音乐开关 ─────────────────────────────────────────── */
.music {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.music:hover {
  color: var(--silk);
  border-color: var(--line-strong);
}
.music[aria-pressed='true'] {
  color: var(--azure);
  border-color: var(--azure-dim);
}
.music__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.music__bars i {
  width: 2px;
  height: 4px;
  background: currentColor;
}
.music[aria-pressed='true'] .music__bars i {
  animation: eq 1s ease-in-out infinite;
}
.music[aria-pressed='true'] .music__bars i:nth-child(2) {
  animation-delay: 0.15s;
}
.music[aria-pressed='true'] .music__bars i:nth-child(3) {
  animation-delay: 0.3s;
}
.music[aria-pressed='true'] .music__bars i:nth-child(4) {
  animation-delay: 0.45s;
}
@keyframes eq {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 13px;
  }
}

/* ── 留言照片 ─────────────────────────────────────────── */
.composer__photo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
}
.composer__photo img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.msg__img {
  display: block;
  margin-top: 0.7rem;
  max-width: min(420px, 100%);
  max-height: 280px;
  width: auto;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.review__src {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  word-break: break-all;
}
.review__src a {
  color: var(--faint);
}

/* ── 页脚 ─────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: 2.4rem 0 3.4rem;
  font-size: 0.8rem;
  color: var(--faint);
  line-height: 1.9;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
}
.foot__spacer {
  margin-left: auto;
}

/* ── 入场 ─────────────────────────────────────────────── */
.rise {
  animation: rise 0.75s var(--ease) both;
}
.rise-2 {
  animation-delay: 0.12s;
}
.rise-3 {
  animation-delay: 0.24s;
}
.rise-4 {
  animation-delay: 0.36s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 房间切换过渡 */
@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .topbar__inner {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  /* 手机上一行放下全部五个房间，不用横向滑 */
  .nav__link {
    flex: 1 0 auto;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .nav__quip {
    display: none;
  }
  .who {
    margin-left: auto;
  }
  .msg {
    grid-template-columns: 1fr;
  }
  .msg__mark {
    display: none;
  }
  /* 小屏上舞台不用那么高，开始按钮仍然可见 */
  .stage {
    min-height: 240px;
  }
  /* HUD 的操作提示手机上多余，藏掉 */
  .hud > span:last-child {
    display: none;
  }
  .cinema__controls {
    gap: 0.5rem;
  }
}

/* 触屏设备：强制走 GPU 合成，避免安卓把动效吞掉 */
@media (hover: none), (pointer: coarse) {
  .gallery__item,
  .card__face {
    will-change: transform, opacity;
  }
}
@media (max-width: 720px) {
  .gallery__item.is-dealt {
    animation-duration: 0.72s;
  }
  .card.is-open .card__front,
  .card.is-open .card__back {
    animation-duration: 0.6s;
  }
}
/* ── 留言回复 ─────────────────────────────────────────── */
.replies {
  margin-top: 0.9rem;
  padding-left: 0.95rem;
  border-left: 2px solid var(--line-strong);
  display: grid;
  gap: 0.9rem;
}
.msg__body--reply .msg__name {
  font-size: 0.94rem;
}
.msg__body--reply .msg__text {
  font-size: 0.95rem;
  color: var(--ash);
}
.reply-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.reply-form input {
  flex: 1;
}

/* ── 赠图墙 ───────────────────────────────────────────── */
.wall__give {
  margin-bottom: 1.4rem;
}
.wall__givehead {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.wall__hint {
  color: var(--faint);
  font-size: 0.84rem;
  margin-top: 0.4rem;
}
.wall__preview {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
.wall__preview img {
  width: 100%;
  border: 1px solid var(--line-strong);
}
.wall__meta {
  display: grid;
  gap: 0.7rem;
}
.wall__acts {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.wall {
  columns: 3 240px;
  column-gap: 1rem;
}
.wall__item {
  break-inside: avoid;
  margin: 0 0 1rem;
}
.wall__frame {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: rgba(34, 48, 104, 0.5);
  cursor: zoom-in;
  overflow: hidden;
}
.wall__frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease);
}
.wall__frame:hover img {
  transform: scale(1.03);
}
.wall__cap {
  padding: 0.55rem 0.2rem 0;
  font-size: 0.82rem;
  color: var(--faint);
}
.wall__cap b {
  color: var(--azure-soft);
  font-weight: 500;
}
.wall__time {
  margin-left: 0.5rem;
}
.wall__cap p {
  margin-top: 0.3rem;
  color: var(--ash);
}

/* ── 审核台 ───────────────────────────────────────────── */
.review__row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.review__row .field {
  flex: 1;
  min-width: 200px;
}
.review__hint {
  color: var(--faint);
  font-size: 0.82rem;
  margin-top: 0.7rem;
}
.review__hint code {
  color: var(--azure-soft);
}
.review__list {
  display: grid;
  gap: 1rem;
}
.review__item {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.42);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.review__item.is-gone {
  opacity: 0;
  transform: translateX(14px);
}
.review__thumb {
  padding: 0;
  border: 1px solid var(--line-strong);
  background: none;
  cursor: zoom-in;
}
.review__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.review__who {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.review__caption {
  color: var(--ash);
  margin-top: 0.5rem;
  font-size: 0.92rem;
}
.review__acts {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

/* ── 杂物间 ─────────────────────────────────────── */
.page--narrow {
  max-width: 720px;
}
.tip__lead {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--silk);
}
.tip__body {
  color: var(--ash);
  margin-top: 0.9rem;
  line-height: 2;
}
.tip__codes {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.tip__code {
  margin: 0;
  text-align: center;
}
.tip__code img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  background: rgba(238, 243, 255, 0.92);
  border: 1px solid var(--line-strong);
}
.tip__code figcaption {
  margin-top: 0.45rem;
  color: var(--faint);
  font-size: 0.8rem;
}
.tip__fallback {
  color: var(--faint);
  font-size: 0.86rem;
  margin-top: 1.2rem;
}
.tip__note {
  color: var(--faint);
  font-size: 0.82rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

/* 页脚的两个小入口，做得很淡 */
.foot__tiny {
  display: flex;
  gap: 0.9rem;
}
.foot__tiny a {
  color: var(--faint);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.foot__tiny a:hover {
  color: var(--azure-soft);
}

@media (max-width: 720px) {
  .wall__preview,
  .review__item {
    grid-template-columns: 1fr;
  }
  .wall {
    columns: 2 150px;
  }
  .tip__code img {
    width: 148px;
    height: 148px;
  }
}

/* ── 门厅 · 预祝生日快乐 ─────────────────────────────── */
.wish {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  margin: 2.6rem 0;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(56, 78, 152, 0.44), rgba(26, 38, 84, 0.62));
  overflow: hidden;
}
.wish__kicker {
  font-family: var(--f-mono);
  letter-spacing: 0.36em;
  color: var(--azure-dim);
  font-size: 0.78rem;
}
.wish__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 300;
  margin-top: 0.2rem;
}
.wish__sub {
  color: var(--ash);
  font-size: 0.92rem;
  margin-top: 0.5rem;
}
.wish__row {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.wish__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--crimson-soft);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(255, 92, 120, 0.24), rgba(140, 196, 255, 0.18));
  color: var(--silk);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.25s var(--ease);
}
.wish__btn:hover {
  box-shadow: 0 0 28px rgba(255, 120, 150, 0.35);
}
.wish__btn:active {
  transform: scale(0.94);
}
.wish__btn-glyph {
  color: var(--crimson);
  animation: heartbeat 1.6s ease-in-out infinite;
}
.wish__stats {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
}
.wish__count b {
  font-family: var(--f-display);
  font-size: 2.2rem;
  color: var(--azure-soft);
}
.wish__count span {
  color: var(--faint);
  font-size: 0.8rem;
  margin-left: 0.3rem;
}
.wish__mine {
  color: var(--faint);
  font-size: 0.82rem;
}
.wish__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wish__bit {
  position: absolute;
  left: 46%;
  top: 58%;
  color: var(--crimson-soft);
  animation: floatUp 1.7s ease-out forwards;
}

/* ── Q 版希儿小人 ─────────────────────────────────────── */
.puppet {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 200px;
}
.puppet__aura {
  position: absolute;
  inset: 10% 8% 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(140, 196, 255, 0.45), transparent 70%);
  filter: blur(8px);
  opacity: var(--aura, 0.4);
  transition: opacity 0.4s var(--ease);
}
.puppet__body {
  transform-origin: 50% 100%;
  will-change: transform;
}
.puppet__img {
  width: 176px;
  height: auto;
  display: block;
  user-select: none;
}
.puppet.is-happy .puppet__img {
  animation: happySpin 0.9s var(--ease);
}
.puppet__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.puppet__bit {
  position: absolute;
  left: 50%;
  bottom: 40%;
  animation: floatUp 1.4s ease-out forwards;
}
.puppet__bit--heart {
  color: var(--crimson-soft);
}
.puppet__bit--sparkle {
  color: var(--azure-soft);
}
.puppet__bubble {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  background: rgba(44, 60, 124, 0.96);
  border: 1px solid var(--line-strong);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.puppet__bubble.is-pop {
  animation: bubblePop 0.32s var(--ease);
}

/* ── 任务清单 ─────────────────────────────────────────── */
.tasks {
  margin: 2.4rem 0;
}
.tasks__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.tasks__level {
  color: var(--azure-soft);
  font-size: 0.84rem;
}
.tasks__bar {
  height: 4px;
  background: rgba(140, 196, 255, 0.16);
  margin: 0.8rem 0 1rem;
}
.tasks__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--azure), var(--crimson-soft));
  transition: width 0.7s var(--ease);
}
.tasks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
.task {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.42);
}
.task__tick {
  color: var(--faint);
}
.task.is-done {
  border-color: var(--line-strong);
}
.task.is-done .task__tick,
.task.is-done .task__name {
  color: var(--azure-soft);
}
.task__name {
  font-size: 0.92rem;
}
.task__hint {
  color: var(--faint);
  font-size: 0.76rem;
  margin-top: 0.2rem;
}

/* ── 头像 / 等级 / 称号 ───────────────────────────────── */
.avatar {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: rgba(20, 30, 66, 0.6);
  object-fit: cover;
  flex: none;
}
.avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}
.avatar--sm {
  width: 28px;
  height: 28px;
}
.lv {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  padding: 0.08rem 0.32rem;
  border: 1px solid var(--lv-color);
  color: var(--lv-color);
}
.msg__name {
  color: var(--lv-color, var(--silk));
}
.msg__who {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.chips {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.chip {
  font-size: 0.66rem;
  padding: 0.08rem 0.34rem;
  border: 1px solid var(--crimson-soft);
  color: var(--crimson-soft);
  background: rgba(255, 92, 120, 0.1);
}
.chip--more {
  border-color: var(--line-strong);
  color: var(--faint);
}

/* ── 两个频道 ─────────────────────────────────────────── */
.channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.channel {
  text-align: left;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(28, 42, 94, 0.5);
  color: var(--ash);
  cursor: pointer;
  font-size: 0.95rem;
}
.channel.is-active {
  border-color: var(--azure);
  color: var(--silk);
  background: rgba(56, 78, 152, 0.5);
}
.channel__hint {
  display: block;
  font-size: 0.74rem;
  color: var(--faint);
  margin-top: 0.25rem;
}
.chat__row {
  display: flex;
  gap: 0.6rem;
}
.chat__row .field {
  flex: 1;
}
.chat__hint {
  color: var(--faint);
  font-size: 0.78rem;
  margin-top: 0.5rem;
}
.gate__note {
  color: var(--faint);
  font-size: 0.78rem;
  margin-top: 0.5rem;
  line-height: 1.7;
}
.gate__setpw {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

/* ── 称号达成动画 ─────────────────────────────────────── */
.burst {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 50% at 50% 45%, rgba(20, 30, 66, 0.86), rgba(8, 12, 30, 0.95));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  overflow: hidden;
}
.burst.is-in {
  opacity: 1;
}
.burst.is-out {
  opacity: 0;
}
.burst__glow {
  position: absolute;
  width: min(70vmin, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 196, 255, 0.38), rgba(255, 157, 174, 0.16) 45%, transparent 70%);
  animation: spin 9s linear infinite;
}
.burst__stage {
  position: relative;
  text-align: center;
  padding: 2rem;
}
.burst__kicker {
  font-family: var(--f-mono);
  letter-spacing: 0.4em;
  color: var(--azure-dim);
  font-size: 0.8rem;
}
.burst__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 300;
  color: var(--silk);
  text-shadow: 0 0 28px rgba(140, 196, 255, 0.55);
  animation: titleIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  animation-delay: calc(var(--i, 0) * 0.18s);
}
.burst__note {
  color: var(--ash);
  margin-top: 0.35rem;
  font-size: 0.9rem;
  animation: titleIn 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.18s + 0.12s);
}
.burst__hint {
  color: var(--faint);
  font-size: 0.78rem;
  margin-top: 1.4rem;
}
.burst__bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  animation: burstBit 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--delay);
}
@keyframes titleIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.86);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes burstBit {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
}

/* ── 杂物间 · 微信号 ──────────────────────────────────── */
.tip__wechat {
  margin-top: 1.5rem;
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
}
.tip__wechat-label {
  color: var(--faint);
  font-size: 0.84rem;
}
.tip__wechat-row {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.tip__wechat-row code {
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--azure-soft);
  background: rgba(34, 48, 104, 0.6);
  border: 1px solid var(--line-strong);
  padding: 0.35rem 0.7rem;
}

/* ── 顶栏里的头像 ─────────────────────────────────────── */
.who__avatar {
  position: relative;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.who__camera {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  color: var(--azure-soft);
  background: rgba(44, 60, 124, 0.95);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.who__id {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 720px) {
  .wish {
    grid-template-columns: 1fr;
  }
  .puppet {
    max-width: 220px;
    margin: 0 auto;
  }
  .channels {
    grid-template-columns: 1fr;
  }
  .wish__stats {
    gap: 0.9rem;
  }
}

/* 门厅许愿 / 小人 / 称号用到的关键帧 */
@keyframes floatUp {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.6);
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -120px)) scale(var(--scale, 1));
  }
}
@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
}
@keyframes bubblePop {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes happySpin {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-18px) rotate(-9deg);
  }
  70% {
    transform: translateY(-8px) rotate(7deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── 门厅右上角：可动的希儿（Spine 未接入时用分层立绘）───── */
.hero__corner {
  position: absolute;
  right: 1%;
  top: 4%;
  width: clamp(120px, 17vw, 210px);
  pointer-events: none;
}
.hero__corner .puppet {
  min-height: 0;
}
.hero__corner .puppet__img {
  width: 100%;
}
.hero__corner .puppet__bubble {
  white-space: normal;
  max-width: 15rem;
  text-align: center;
  line-height: 1.6;
}
.hero__corner canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 飘过的多语言祝福（固定在视口上，能从屏幕边缘进出）──── */
.drift {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.drift__item {
  position: absolute;
  top: var(--lane, 20%);
  white-space: nowrap;
  color: var(--azure-soft);
  opacity: 0;
  font-family: var(--f-display);
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(140, 196, 255, 0.35);
  animation: driftLtr var(--dur, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}
/* 交替方向：一半从右往左，一半从左往右 */
.drift__item--rtl {
  animation-name: driftRtl;
}
.drift__item:nth-child(3n) {
  color: var(--crimson-soft);
  text-shadow: 0 0 18px rgba(255, 120, 150, 0.3);
}
@keyframes driftRtl {
  0% {
    left: 100%;
    transform: translateX(0);
    opacity: 0;
  }
  6% {
    opacity: 0.8;
  }
  94% {
    opacity: 0.8;
  }
  100% {
    left: 100%;
    transform: translateX(calc(-100vw - 100%));
    opacity: 0;
  }
}
@keyframes driftLtr {
  0% {
    left: 0;
    transform: translateX(-100%);
    opacity: 0;
  }
  6% {
    opacity: 0.8;
  }
  94% {
    opacity: 0.8;
  }
  100% {
    left: 0;
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* ── 留言字色选择 ─────────────────────────────────────── */
.swatches {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.7rem 0 0.2rem;
  flex-wrap: wrap;
}
.swatches__label {
  color: var(--faint);
  font-size: 0.78rem;
  margin-right: 0.2rem;
}
.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(238, 243, 255, 0.35);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease);
}
.swatch:hover {
  transform: scale(1.12);
}
.swatch.is-active {
  box-shadow: 0 0 0 2px var(--abyss), 0 0 0 3px var(--sw);
}

/* ── 完成任务的小反馈卡片 ─────────────────────────────── */
.tasktoast {
  position: fixed;
  right: 1.2rem;
  top: 5.2rem;
  z-index: 55;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(56, 78, 152, 0.95), rgba(26, 38, 84, 0.95));
  box-shadow: 0 10px 30px rgba(6, 12, 34, 0.45);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s var(--ease);
}
.tasktoast.is-in {
  transform: translateX(0);
  opacity: 1;
}
.tasktoast.is-out {
  transform: translateX(120%);
  opacity: 0;
}
.tasktoast__kicker {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--crimson-soft);
}
.tasktoast__name {
  margin-top: 0.3rem;
  font-size: 0.92rem;
}
.tasktoast__xp {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--azure-soft);
}

/* 已完成的任务：压下去，不再抢眼 */
.task.is-done {
  opacity: 0.42;
  border-color: var(--line);
  background: rgba(20, 30, 66, 0.35);
}
.task.is-done:hover {
  opacity: 0.7;
}

@media (max-width: 720px) {
  .hero__corner {
    width: 108px;
    top: 2%;
  }
  .tasktoast {
    right: 0.8rem;
    left: 0.8rem;
  }
}

/* ── 阅览室 / 同人文 ─────────────────────────────────── */
.channels--wide {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.6rem;
}
.fic-list {
  display: grid;
  gap: 0.7rem;
}
.fic-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  background: rgba(34, 48, 104, 0.42);
  color: var(--silk);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.fic-card:hover,
.fic-card.is-open {
  border-color: var(--line-strong);
  background: rgba(56, 78, 152, 0.46);
}
.fic-card__title {
  display: block;
  font-family: var(--f-display);
  font-size: 1.2rem;
}
.fic-card__meta {
  display: block;
  color: var(--faint);
  font-size: 0.76rem;
  margin-top: 0.25rem;
}
.fic-card__excerpt {
  display: block;
  color: var(--ash);
  font-size: 0.86rem;
  margin-top: 0.45rem;
  line-height: 1.8;
}
.fic-reader {
  margin-bottom: 0.4rem;
}
.fic-reader__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 300;
}
.fic-reader__meta {
  color: var(--faint);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}
.fic-reader__body {
  margin-top: 1.2rem;
  color: var(--silk);
  line-height: 2.05;
  font-size: 1rem;
}
.fic-reader__body p {
  margin-bottom: 1rem;
  text-indent: 2em;
}
.field--tall {
  min-height: 260px;
}

.review__item--fic {
  grid-template-columns: 1fr;
}
.review__preview {
  margin-top: 0.7rem;
  max-height: 220px;
  overflow: hidden;
  color: var(--ash);
  font-size: 0.86rem;
  line-height: 1.9;
  white-space: pre-wrap;
  border-left: 2px solid var(--line);
  padding-left: 0.8rem;
}

/* ── 量子海环境层（ComfyUI 绘制的星云，压得很淡只提色）──── */
#aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../assets/deco/aurora.jpg') center / cover no-repeat;
  opacity: 0.09;
  filter: saturate(0.78) brightness(0.68);
  mix-blend-mode: screen;
  animation: auroraDrift 48s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from {
    transform: scale(1.04) translate3d(-1%, -1%, 0);
  }
  to {
    transform: scale(1.12) translate3d(1.5%, 1.5%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #aurora {
    animation: none;
  }
}

/* ── 个人中心 ─────────────────────────────────────────── */
.me__card {
  display: grid;
  gap: 1.2rem;
}
.me__head {
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.me__avatar {
  position: relative;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  line-height: 0;
  flex: none;
}
.avatar--lg {
  width: 84px;
  height: 84px;
}
.me__name {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  color: var(--lv-color, var(--silk));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.me__since {
  color: var(--faint);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.me__levelhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.me__lvname {
  font-size: 1rem;
}
.me__xp {
  color: var(--faint);
  font-size: 0.8rem;
}
.me__bar {
  height: 6px;
  margin-top: 0.5rem;
  background: rgba(140, 196, 255, 0.16);
  overflow: hidden;
}
.me__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azure), var(--crimson-soft));
  transition: width 0.8s var(--ease);
}
.me__bar--task {
  margin: 0.5rem 0 1rem;
}
.me__titles {
  display: grid;
  gap: 0.5rem;
}
.me__title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--line);
  color: var(--faint);
  font-size: 0.86rem;
}
.me__title b {
  font-weight: 500;
  color: var(--faint);
}
.me__title.is-owned {
  border: 1px solid var(--crimson-soft);
  color: var(--ash);
  background: rgba(255, 92, 120, 0.08);
}
.me__title.is-owned b {
  color: var(--crimson-soft);
}
.me__stats p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ash);
}
.me__stats p:last-child {
  border-bottom: 0;
}
.me__stats b {
  color: var(--azure-soft);
  font-weight: 500;
}

/* ── 影像室切换按钮：做得更显眼 ───────────────────────── */
.cinema__controls .btn {
  position: relative;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(140, 196, 255, 0.16), rgba(255, 92, 120, 0.12));
  color: var(--silk);
  transition: transform 0.14s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
}
.cinema__controls .btn:hover {
  border-color: var(--azure);
  box-shadow: 0 0 22px rgba(140, 196, 255, 0.4);
  transform: translateY(-1px);
}
.cinema__controls .btn:active {
  transform: scale(0.95);
}
.cinema__controls #cinema-next {
  animation: nudgeRight 2.6s ease-in-out infinite;
}
.cinema__controls #cinema-prev {
  animation: nudgeLeft 2.6s ease-in-out infinite;
}
@keyframes nudgeRight {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(4px);
  }
  90% {
    transform: translateX(0);
  }
}
@keyframes nudgeLeft {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(-4px);
  }
  90% {
    transform: translateX(0);
  }
}
.cinema__hintkeys {
  display: block;
  margin-top: 0.5rem;
  color: var(--faint);
  font-size: 0.76rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cinema__controls #cinema-next,
  .cinema__controls #cinema-prev {
    animation: none;
  }
}

/* ── 游戏计分：做得显眼 ─────────────────────────────── */
.hud {
  align-items: center;
  gap: 1.1rem;
}
.hud__item {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.hud__item b {
  font-size: 1.05rem;
}
.hud__score {
  padding: 0.3rem 0.9rem 0.35rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(56, 78, 152, 0.55), rgba(20, 30, 66, 0.6));
  box-shadow: 0 0 22px rgba(140, 196, 255, 0.22);
}
.hud__score b {
  display: inline-block;
  min-width: 2.2em;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 0 12px rgba(140, 196, 255, 0.95),
    0 0 30px rgba(140, 196, 255, 0.55);
  vertical-align: -0.12em;
}

/* ── 记忆翻牌：牌背流光 ───────────────────────────── */
.card__back {
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 176, 0.35),
    inset 0 0 22px rgba(140, 196, 255, 0.25),
    0 6px 18px rgba(6, 12, 34, 0.5);
  overflow: hidden;
}
.card__back::after {
  content: '';
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.42) 48%,
    rgba(255, 255, 255, 0.08) 54%,
    transparent 62%
  );
  transform: translateX(-40%);
  animation: sheen 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%,
  62% {
    transform: translateX(-45%);
  }
  82%,
  100% {
    transform: translateX(45%);
  }
}
.card:not(.is-open):hover .card__back {
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 176, 0.6),
    inset 0 0 26px rgba(140, 196, 255, 0.4),
    0 0 26px rgba(140, 196, 255, 0.45);
}

/* ── 编年史：年份放大 ─────────────────────────────── */
.tl {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.2rem;
}
.tl__row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 1.1rem;
  animation: tlIn 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.tl__when {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding-right: 0.9rem;
  border-right: 1px solid var(--line-strong);
  text-align: right;
}
.tl__year {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1;
  color: var(--azure-soft);
  text-shadow: 0 0 20px rgba(140, 196, 255, 0.55);
}
.tl__year--short {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--crimson-soft);
  text-shadow: 0 0 16px rgba(255, 140, 170, 0.4);
}
.tl__label {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.tl__title {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--silk);
}
.tl__text {
  margin-top: 0.5rem;
  color: var(--ash);
  line-height: 1.95;
  font-size: 0.95rem;
}
@keyframes tlIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── 阅览室：进场与分隔 ───────────────────────────── */
.page > .panel,
.panel__pad > .panel {
  animation: panelIn 0.5s var(--ease) both;
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page > .panel:nth-of-type(2) {
  animation-delay: 70ms;
}
.page > .panel:nth-of-type(3) {
  animation-delay: 140ms;
}
.page > .panel:nth-of-type(4) {
  animation-delay: 210ms;
}
/* 标签页切换时内容淡入 */
#lib-body > * {
  animation: libIn 0.45s var(--ease) both;
}
@keyframes libIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 章节标题两侧的细线装饰 */
.page h3 {
  position: relative;
  padding-bottom: 0.5rem;
}
.page h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--crimson-soft), transparent);
}
.page--narrow h3::after,
.fic-reader h3::after {
  display: none;
}

@media (max-width: 720px) {
  .tl__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tl__when {
    border-right: 0;
    border-left: 2px solid var(--line-strong);
    padding-right: 0;
    padding-left: 0.7rem;
    text-align: left;
  }
  .hud__score b {
    font-size: 1.6rem;
  }
}

/* ── 音乐室面板 ───────────────────────────────────────── */
.music {
  position: fixed;
  right: 1rem;
  top: 4.2rem;
  z-index: 40;
  width: min(340px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(48, 68, 136, 0.97), rgba(20, 30, 66, 0.97));
  box-shadow: 0 18px 46px rgba(4, 8, 24, 0.55), inset 0 1px 0 rgba(200, 226, 255, 0.12);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.24s var(--ease), opacity 0.2s var(--ease);
}
.music.is-in {
  transform: none;
  opacity: 1;
}
.music__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.music__kicker {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--azure-dim);
}
.music__close {
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.music__now {
  font-family: var(--f-display);
  font-size: 1.25rem;
  margin-top: 0.5rem;
  color: var(--silk);
}
.music__credit {
  color: var(--faint);
  font-size: 0.74rem;
  margin-top: 0.2rem;
}
.music__controls {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.music__bar {
  height: 3px;
  margin-top: 0.7rem;
  background: rgba(140, 196, 255, 0.18);
}
.music__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--azure), var(--crimson-soft));
  transition: width 0.4s linear;
}
.music__list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}
.music__track {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ash);
  cursor: pointer;
}
.music__track:hover {
  background: rgba(140, 196, 255, 0.08);
  color: var(--silk);
}
.music__track.is-active {
  color: var(--azure-soft);
  background: rgba(140, 196, 255, 0.12);
}
.music__no {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--faint);
}
.music__title {
  font-size: 0.92rem;
}
.music__note {
  display: block;
  font-size: 0.72rem;
  color: var(--faint);
  margin-top: 0.15rem;
}
.music__hint {
  color: var(--faint);
  font-size: 0.74rem;
  margin-top: 0.7rem;
}
@media (max-width: 720px) {
  .music {
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
    top: 3.8rem;
  }
}

/* ── 右上角的她：可点、Spine 画布自适应 ─────────────── */
.hero__corner {
  pointer-events: auto;
  cursor: pointer;
}
.puppet--spine {
  display: block;
  min-height: 0;
}
.puppet--spine .puppet__stage {
  width: 100%;
  aspect-ratio: 276 / 454;
  max-height: 46vh;
}
.puppet--spine canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__corner .puppet__bubble {
  top: -0.4rem;
}

/* ── 暗角：把视线收回到中间，背景不再抢戏 ─────────────── */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 82% at 50% 42%, transparent 42%, rgba(6, 10, 26, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 10, 26, 0.4) 0%, transparent 22%, transparent 76%, rgba(6, 10, 26, 0.5) 100%);
}
.topbar,
#view,
.foot {
  position: relative;
  z-index: 1;
}

/* 飘字：更淡，避免和正文抢注意力 */
.drift__item {
  opacity: 0;
  font-size: 0.72rem;
}
@keyframes driftRtlFaint {
  0% {
    left: 100%;
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 0.42;
  }
  92% {
    opacity: 0.42;
  }
  100% {
    left: 100%;
    transform: translateX(calc(-100vw - 100%));
    opacity: 0;
  }
}
@keyframes driftLtrFaint {
  0% {
    left: 0;
    transform: translateX(-100%);
    opacity: 0;
  }
  8% {
    opacity: 0.42;
  }
  92% {
    opacity: 0.42;
  }
  100% {
    left: 0;
    transform: translateX(100vw);
    opacity: 0;
  }
}
.drift__item {
  animation-name: driftLtrFaint;
}
.drift__item--rtl {
  animation-name: driftRtlFaint;
}
@media (max-width: 720px) {
  .drift__item:nth-child(n + 7) {
    display: none;
  }
}

/* ── 全局 Q 版小助手（非门厅页面左下角）────────────────────────
   门厅右上角已经有一只正式的（Spine），所以这只只在别的房间出现，
   而且固定在左下——顶栏、音乐面板、任务提示都在右上，不去抢位置。
   纯装饰：aria-hidden，不进 tab 序。
   ──────────────────────────────────────────────────────────── */
.companion {
  position: fixed;
  left: 0.85rem;
  bottom: 0.85rem;
  width: 124px;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.companion[hidden] {
  display: none !important;
}
.companion .puppet {
  min-height: 0;
  place-items: end center;
  cursor: pointer;
  pointer-events: auto;
}
.companion .puppet__img {
  width: 100%;
}
/* 窄容器里气泡放到头顶，不要左右横出去 */
.companion .puppet__bubble {
  left: 0;
  top: auto;
  bottom: 100%;
  transform: none;
  white-space: normal;
  width: max-content;
  max-width: min(13rem, 52vw);
  margin-bottom: 0.4rem;
  line-height: 1.55;
  text-align: left;
  pointer-events: none;
}
.companion__confetti {
  position: absolute;
  left: 50%;
  bottom: 45%;
  color: var(--crimson-soft);
  pointer-events: none;
  animation: companionConfetti 1.4s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
.companion__confetti:nth-child(3n) {
  color: var(--azure-soft);
}
@keyframes companionConfetti {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx, 0), -96px, 0) rotate(var(--rot, 180deg));
    opacity: 0;
  }
}

/* 手机：缩小 + 半透明，别压住正文和按钮 */
@media (max-width: 720px) {
  .companion {
    left: 0.5rem;
    bottom: 0.5rem;
    width: 92px;
    opacity: 0.75;
  }
  .companion .puppet__bubble {
    max-width: min(10rem, 58vw);
    font-size: 0.76rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   《人群》+ 小游戏特效 + 榜单金银铜（追加段，勿改上文）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 得分跳动：分数变大时闪一下 ────────────────────────── */
@keyframes hudScorePop {
  0% {
    transform: scale(1);
    text-shadow:
      0 0 12px rgba(140, 196, 255, 0.95),
      0 0 30px rgba(140, 196, 255, 0.55);
  }
  35% {
    transform: scale(1.22);
    color: #fff;
    text-shadow:
      0 0 18px rgba(255, 255, 255, 1),
      0 0 44px rgba(116, 180, 255, 0.95);
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 0 12px rgba(140, 196, 255, 0.95),
      0 0 30px rgba(140, 196, 255, 0.55);
  }
}
.hud__score b.is-pop {
  animation: hudScorePop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 屏幕边缘光晕脉冲（连击 / 增益时轻轻亮一下） ────────── */
.fx-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s linear;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(92, 240, 168, 0) 46%, rgba(92, 240, 168, 0.34) 100%),
    radial-gradient(140% 100% at 50% 50%, rgba(116, 180, 255, 0) 58%, rgba(116, 180, 255, 0.3) 100%);
}

/* ── BOSS 来了：横贯屏幕的红光大字 ─────────────────────── */
@keyframes bossBanner {
  0% {
    opacity: 0;
    transform: scaleX(0.72);
  }
  14% {
    opacity: 1;
    transform: scaleX(1);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.04);
  }
}
.fx-boss {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  height: 76px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  background:
    linear-gradient(90deg, rgba(255, 61, 95, 0) 0%, rgba(255, 61, 95, 0.55) 42%, rgba(255, 61, 95, 0.55) 58%, rgba(255, 61, 95, 0) 100%),
    linear-gradient(180deg, rgba(255, 61, 95, 0) 0%, rgba(255, 61, 95, 0.14) 50%, rgba(255, 61, 95, 0) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 160, 180, 0.7),
    inset 0 -1px 0 rgba(255, 160, 180, 0.7),
    0 0 42px rgba(255, 61, 95, 0.45);
}
.fx-boss.is-on {
  animation: bossBanner 1.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.fx-boss span {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  letter-spacing: 0.28em;
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 61, 95, 1),
    0 0 32px rgba(255, 61, 95, 0.85),
    0 0 60px rgba(255, 61, 95, 0.5);
}

/* ── 结算面板：数字从 0 蹦到目标 ───────────────────────── */
.stage__title--score {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  letter-spacing: 0.05em;
}
.stage__title--score b {
  display: inline-block;
  min-width: 1.4em;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 16px rgba(140, 196, 255, 0.95),
    0 0 48px rgba(116, 180, 255, 0.6);
  transform-origin: 50% 70%;
}
.stage__title--score b.is-done {
  animation: hudScorePop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage__title--score span {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--ash);
}

/* ── 新纪录！ + 粒子 ───────────────────────────────────── */
@keyframes recordGlow {
  0%,
  100% {
    text-shadow:
      0 0 12px rgba(255, 215, 110, 0.85),
      0 0 34px rgba(255, 215, 110, 0.45);
  }
  50% {
    text-shadow:
      0 0 22px rgba(255, 235, 180, 1),
      0 0 56px rgba(255, 200, 90, 0.75);
  }
}
.fx-record {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  color: #ffd76e;
  animation: recordGlow 1.6s ease-in-out infinite;
}
@keyframes burstOut {
  0% {
    transform: rotate(var(--a, 0deg)) translateY(0) scale(1);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--d, 80px))) scale(0.2);
    opacity: 0;
  }
}
.fx-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fx-burst i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd76e;
  box-shadow: 0 0 10px rgba(255, 215, 110, 0.95);
  opacity: 0;
  animation: burstOut 1.5s ease-out 2;
  animation-delay: var(--dl, 0ms);
}
.fx-burst i:nth-child(3n) {
  background: #8cc4ff;
  box-shadow: 0 0 10px rgba(140, 196, 255, 0.95);
}
.fx-burst i:nth-child(4n) {
  width: 5px;
  height: 5px;
  background: #ff8ba3;
  box-shadow: 0 0 10px rgba(255, 61, 95, 0.9);
}

/* ── 榜单：前三名金银铜徽章 + 自己那行高亮 ─────────────── */
.board-list__row:nth-child(-n + 3) .board-list__rank {
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 600;
  color: #10182e;
}
.board-list__row:nth-child(1) {
  box-shadow: inset 0 0 0 1px rgba(255, 214, 110, 0.34);
}
.board-list__row:nth-child(2) {
  box-shadow: inset 0 0 0 1px rgba(206, 216, 232, 0.26);
}
.board-list__row:nth-child(3) {
  box-shadow: inset 0 0 0 1px rgba(214, 152, 96, 0.26);
}
.board-list__row:nth-child(1) .board-list__rank {
  background: linear-gradient(160deg, #ffe9a8, #e8ab2c);
  box-shadow: 0 0 14px rgba(255, 214, 110, 0.65);
}
.board-list__row:nth-child(2) .board-list__rank {
  background: linear-gradient(160deg, #f4f8ff, #b7c2d6);
  box-shadow: 0 0 12px rgba(206, 216, 232, 0.5);
}
.board-list__row:nth-child(3) .board-list__rank {
  background: linear-gradient(160deg, #f0c396, #b9743a);
  box-shadow: 0 0 12px rgba(214, 152, 96, 0.5);
}
.board-list__row.is-me {
  box-shadow: inset 3px 0 0 var(--azure);
  background: rgba(116, 180, 255, 0.13);
}
.board-list__row.is-me .board-list__name {
  color: var(--silk);
}
.board-list__me {
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid rgba(116, 180, 255, 0.5);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.16em;
  color: var(--azure);
}

/* ── 角色故事 · 配图（本轮追加，story.js）────────────────── */
.story__figs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
@media (min-width: 680px) {
  .story__figs--two {
    grid-template-columns: 1fr 1fr;
  }
}
.story__fig {
  margin: 0;
  min-width: 0;
}
.story__figbtn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.story__figbtn img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}
.story__figbtn:hover img {
  transform: scale(1.02);
}
.story__fig figcaption {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ash);
}
.story__src {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.tl__body .story__figs {
  margin-top: 0.9rem;
}

/* ── 画室 · 网友赠图角标（本轮追加，gallery.js）────────────── */
.gallery__legend {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.gallery__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  max-width: 74%;
  padding: 0.14rem 0.5rem;
  border: 1px solid rgba(116, 180, 255, 0.42);
  border-radius: 999px;
  background: rgba(10, 18, 40, 0.78);
  color: var(--azure);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 审核台 · 已收进画室的标记（本轮追加，review.js）───────── */
.review__tag {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(116, 180, 255, 0.42);
  border-radius: 999px;
  color: var(--azure);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}