* {
  box-sizing: border-box;
}

:root {
  --mv-cream: #fff7ea;
  --mv-paper: rgba(255, 250, 239, 0.88);
  --mv-paper-solid: #fffaf0;

  --mv-lilac: #c9b6ff;
  --mv-lilac-soft: #eee8ff;

  --mv-coral: #ff9a8b;
  --mv-coral-soft: #ffe1d8;

  --mv-mint: #9ee6d4;
  --mv-mint-soft: #dcfbf3;

  --mv-sky: #b9ddff;
  --mv-sky-soft: #e5f4ff;

  --mv-gold: #f6c76f;

  --mv-ink: #3e3557;
  --mv-muted: #8a7d9f;

  --mv-border: rgba(97, 76, 130, 0.16);
  --mv-shadow: 0 28px 80px rgba(86, 70, 120, 0.16);
  --mv-soft-shadow: 0 12px 30px rgba(86, 70, 120, 0.12);
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    "Avenir Next",
    "Inter",
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;
  color: var(--mv-ink);
  user-select: none;
}

body {
  min-height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 154, 139, 0.35), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(185, 221, 255, 0.5), transparent 30%),
    radial-gradient(circle at 80% 88%, rgba(158, 230, 212, 0.42), transparent 32%),
    linear-gradient(135deg, #fff0e5 0%, #f4edff 45%, #e8f7ff 100%);
}

/* 背景梦境几何纹理 */
.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.page-bg::before,
.page-bg::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 42px;
  opacity: 0.2;
  transform: rotate(45deg) skew(-8deg, -8deg);
  z-index: 0;
}

.page-bg::before {
  left: -120px;
  bottom: -150px;
  background:
    linear-gradient(135deg, var(--mv-lilac), transparent 68%),
    linear-gradient(45deg, var(--mv-coral), transparent);
    z-index: 0;
}

.page-bg::after {
  right: -140px;
  top: 80px;
  background:
    linear-gradient(135deg, var(--mv-mint), transparent 68%),
    linear-gradient(45deg, var(--mv-sky), transparent);
    z-index: 0;
}

/* 整体布局 */
.app {
  position: relative;
  z-index: 10;
  height: 100vh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 顶部栏 */
.topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.88), rgba(245, 236, 255, 0.78));
  backdrop-filter: blur(18px);
  box-shadow: var(--mv-soft-shadow);
  overflow: hidden;
}

.topbar::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: 22%;
  top: -82px;
  border-radius: 24px;
  transform: rotate(45deg) skew(-10deg, -10deg);
  background: rgba(255, 154, 139, 0.22);
}

.topbar::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  right: 12%;
  bottom: -62px;
  border-radius: 20px;
  transform: rotate(45deg) skew(-10deg, -10deg);
  background: rgba(158, 230, 212, 0.25);
}

.title-block,
.control-panel {
  position: relative;
  z-index: 1;
}

.title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.game-badge {
  width: fit-content;
  padding: 5px 12px;
  margin-bottom: 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 800;
  color: #7357b8;
  background: rgba(201, 182, 255, 0.24);
  border: 1px solid rgba(201, 182, 255, 0.36);
}

h1 {
  margin: 0;
  font-size: 29px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  font-weight: 800;
  color: #3e3557;
}

.title-block p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--mv-muted);
}

/* 控制区 */
.control-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  flex-wrap: wrap;
}

.status-card,
.save-card {
  min-height: 50px;
  padding: 9px 14px;
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px rgba(86, 70, 120, 0.09);
}

.status-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-label {
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--mv-muted);
}

#status {
  font-size: 14px;
  font-weight: 800;
  color: #4c3d6f;
  white-space: nowrap;
}

.save-card {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--mv-muted);
  font-size: 13px;
}

.save-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mv-mint);
  box-shadow:
    0 0 0 5px rgba(158, 230, 212, 0.26),
    0 0 18px rgba(80, 190, 160, 0.45);
}

.primary-btn {
  height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  color: #fffaf0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background:
    linear-gradient(135deg, #ff9a8b 0%, #c9b6ff 100%);
  box-shadow:
    0 12px 26px rgba(255, 154, 139, 0.24),
    0 8px 20px rgba(150, 120, 220, 0.18);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.06) brightness(1.02);
  box-shadow:
    0 16px 34px rgba(255, 154, 139, 0.28),
    0 12px 26px rgba(150, 120, 220, 0.2);
}

.primary-btn:active {
  transform: translateY(0);
}

.game-card::before {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -54px;
  width: 160px;
  height: 160px;
  border-radius: 28px;
  transform: rotate(45deg) skew(-8deg, -8deg);
  background: rgba(255, 154, 139, 0.16);
}

.game-card::after {
  content: "";
  position: absolute;
  right: 52px;
  top: 70px;
  width: 115px;
  height: 115px;
  border-radius: 24px;
  transform: rotate(45deg) skew(-8deg, -8deg);
  background: rgba(158, 230, 212, 0.18);
}

.game-card-header {
  position: relative;
  z-index: 2;
  padding: 0 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.game-card-header h2 {
  margin: 0;
  font-size: 19px;
  color: #3e3557;
}

.game-card-header p {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--mv-muted);
}

.hint-list {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.hint-list span {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #6d5a8d;
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

/* 游戏滚动区域 */
#game-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: auto;
  padding: 32px;
  border-radius: 28px;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden; 
}

/* 优雅滚动条 */
#game-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#game-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.62);
}

#game-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid rgba(255, 250, 240, 0.78);
  background: rgba(142, 119, 180, 0.42);
}

#game-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 119, 180, 0.58);
}

/* 中间拼图区：做成漂浮建筑平台 */
#board {
  isolation: isolate;
  position: absolute;
  z-index: 1;
  overflow: visible;
  border-radius: 14px;
  border: 2px solid rgba(62, 53, 87, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.32), rgba(248, 241, 255, 0.28));
  box-shadow:
    26px 28px 0 rgba(201, 182, 255, 0.26),
    52px 54px 0 rgba(158, 230, 212, 0.18),
    0 28px 70px rgba(86, 70, 120, 0.18);
}

/* 平台边缘，制造一点等距建筑感 */
#board::before {
  content: "";
  position: absolute;
  left: 20px;
  right: -30px;
  bottom: -34px;
  height: 34px;
  transform: skewX(42deg);
  transform-origin: left top;
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(135deg, rgba(201, 182, 255, 0.48), rgba(158, 230, 212, 0.34));
  z-index: -1;
}

#board::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -34px;
  width: 34px;
  bottom: -14px;
  transform: skewY(42deg);
  transform-origin: left top;
  border-radius: 0 14px 14px 0;
  background:
    linear-gradient(135deg, rgba(255, 154, 139, 0.32), rgba(201, 182, 255, 0.42));
  z-index: -1;
}

.board-title {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  color: #655187;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(255, 250, 240, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.84);
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(86, 70, 120, 0.08);
}

/* 拼图区虚线格子：更轻、更梦幻 */
.slot {
  position: absolute;
  border: 1px dashed rgba(101, 81, 135, 0.2);
  pointer-events: none;
}

.slot.occupied {
  background: rgba(201, 182, 255, 0.075);
}

/* 拼图块：不要厚重黑影，改为柔和漂浮感 */
.piece {
  position: absolute;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 10;
  filter:
    drop-shadow(0 8px 9px rgba(86, 70, 120, 0.14))
    drop-shadow(0 18px 22px rgba(86, 70, 120, 0.1));
  transition:
    filter 0.14s ease,
    transform 0.14s ease;
}

.piece:hover {
  filter:
    drop-shadow(0 10px 12px rgba(86, 70, 120, 0.2))
    drop-shadow(0 22px 28px rgba(86, 70, 120, 0.13));
}

.piece.dragging {
  cursor: grabbing;
  z-index: 9999 !important;
  transform: translateY(-2px) scale(1.012);
  filter:
    drop-shadow(0 16px 16px rgba(86, 70, 120, 0.24))
    drop-shadow(0 30px 34px rgba(86, 70, 120, 0.16));
}

/* 已经组合成组：淡紫色魔法感 */
.piece.grouped {
  filter:
    drop-shadow(0 0 8px rgba(201, 182, 255, 0.9))
    drop-shadow(0 12px 18px rgba(86, 70, 120, 0.12));
}

/* 放在最终正确位置：薄荷绿发光 */
.piece.correct {
  filter:
    drop-shadow(0 0 9px rgba(158, 230, 212, 1))
    drop-shadow(0 12px 16px rgba(86, 70, 120, 0.1));
}

.piece.grouped.correct {
  filter:
    drop-shadow(0 0 10px rgba(158, 230, 212, 1))
    drop-shadow(0 0 5px rgba(201, 182, 255, 0.86))
    drop-shadow(0 12px 16px rgba(86, 70, 120, 0.1));
}

/* 小屏幕 */
@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app {
    height: auto;
    min-height: 100vh;
    padding: 12px;
    z-index: 10;
  }

  .topbar {
    flex-direction: column;
    border-radius: 24px;
  }

  h1 {
    font-size: 24px;
  }

  .control-panel {
    justify-content: flex-start;
  }

}

/* 拼图区本身增加一点顶部平台高光 */
#board .board-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 255, 255, 0.7), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%);
}

/* 确保 slot 在高光之上 */
.slot {
  z-index: 1;
}

/* =========================
   拼图拖动柔和光晕
   ========================= */

.piece {
  will-change: transform, filter;
}

/* 拖动时的柔和光晕 */
.piece.dragging {
  transform: translateY(-3px) scale(1.018);
  filter:
    drop-shadow(0 0 12px rgba(255, 250, 240, 0.95))
    drop-shadow(0 0 22px rgba(201, 182, 255, 0.85))
    drop-shadow(0 16px 20px rgba(86, 70, 120, 0.24))
    drop-shadow(0 34px 40px rgba(86, 70, 120, 0.16));
}

/* 被拖动的同组拼图也给一点整体发光感 */
.piece.group-dragging {
  filter:
    drop-shadow(0 0 10px rgba(201, 182, 255, 0.72))
    drop-shadow(0 14px 18px rgba(86, 70, 120, 0.16));
}

/* =========================
   组合成功淡紫色闪光动画
   ========================= */

.merge-flash {
  position: absolute;
  pointer-events: none;
  z-index: 9998;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(201, 182, 255, 0.62) 28%, rgba(201, 182, 255, 0.18) 55%, transparent 72%);
  animation: mergeFlash 720ms ease-out forwards;
}

.merge-flash::before,
.merge-flash::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 20px;
  border: 2px solid rgba(201, 182, 255, 0.65);
  transform: rotate(45deg);
}

.merge-flash::after {
  inset: 42px;
  border-color: rgba(158, 230, 212, 0.6);
  animation: mergeDiamond 720ms ease-out forwards;
}

@keyframes mergeFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.85);
  }
}

@keyframes mergeDiamond {
  0% {
    transform: rotate(45deg) scale(0.5);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) scale(1.8);
    opacity: 0;
  }
}

/* 组合成功时拼图块轻微闪一下 */
.piece.just-merged {
  animation: pieceMergedPulse 520ms ease-out;
}

@keyframes pieceMergedPulse {
  0% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 0 0 rgba(201, 182, 255, 0))
      drop-shadow(0 10px 16px rgba(86, 70, 120, 0.13));
  }

  45% {
    transform: translateY(-2px) scale(1.018);
    filter:
      drop-shadow(0 0 13px rgba(201, 182, 255, 0.95))
      drop-shadow(0 0 8px rgba(255, 250, 240, 0.9))
      drop-shadow(0 16px 24px rgba(86, 70, 120, 0.16));
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* =========================
   可选：让网格更像梦境里的细线
   ========================= */

.slot {
  border-color: rgba(101, 81, 135, 0.16);
}

.slot.occupied {
  background:
    linear-gradient(135deg, rgba(201, 182, 255, 0.06), rgba(158, 230, 212, 0.04));
}

/* =========================
   紧凑布局：把游戏界面往上提
   ========================= */

body {
  height: 100vh;
  overflow: hidden;
}

/* 整体页面减少顶部和四周留白 */
.app {
  height: 100vh;
  padding: 8px 12px 12px;
  gap: 8px;
  z-index: 10;
}

/* 顶部栏压缩高度 */
.topbar {
  padding: 8px 12px;
  border-radius: 20px;
  gap: 12px;
  align-items: center;
}

/* 顶部装饰图形仍保留，但不要显得太占空间 */
.topbar::before {
  width: 90px;
  height: 90px;
  top: -58px;
}

.topbar::after {
  width: 70px;
  height: 70px;
  bottom: -48px;
}

/* 标题区域压缩 */
.game-badge {
  display: none;
}

h1 {
  font-size: 22px;
  line-height: 1;
}

.title-block p {
  display: block;
  font-size: 13px;
  color: var(--mv-muted);
  margin: 6px 0 0;
}

/* 控制区压缩 */
.status-card,
.save-card {
  min-height: 38px;
  padding: 5px 10px;
  border-radius: 13px;
}

.status-label {
  font-size: 10px;
  margin-bottom: 1px;
}

#status {
  font-size: 13px;
}

.save-card {
  font-size: 12px;
}

.save-dot {
  width: 8px;
  height: 8px;
  box-shadow:
    0 0 0 4px rgba(158, 230, 212, 0.22),
    0 0 14px rgba(80, 190, 160, 0.38);
}

.primary-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 13px;
}

/* 如果你还想保留“漂浮拼图区/说明/标签”，用这个紧凑版 */
.game-card-header {
  padding: 0 4px 8px;
}

.game-card-header h2 {
  font-size: 15px;
}

.game-card-header p {
  display: none;
}

.hint-list {
  display: none;
}

/* =========================
   全屏游戏区：从页面最顶部开始
   ========================= */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* app 不再留白，不再用 gap 把游戏区挤下去 */
.app {
  width: 100%;
  height: 100vh;
  padding: 0;
  gap: 0;
  display: block;
  z-index: 10;
}

/* 顶部栏改成悬浮，不占布局空间 */
.topbar {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 12px;
  z-index: 10000;

  padding: 8px 12px;
  border-radius: 20px;
  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 顶部栏内部压缩 */
.game-badge {
  display: none;
}

h1 {
  font-size: 20px;
  line-height: 1;
}

.status-card,
.save-card {
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 12px;
}

.status-label {
  display: none;
}

#status {
  font-size: 13px;
}

.save-card {
  font-size: 12px;
}

.primary-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
}

/* 游戏卡片从顶部开始，占满整个页面 */
.game-card {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  border: none;
  box-shadow: none;
  padding: 0;
  align-items: flex-start;
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 16px;
  backdrop-filter: none;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  /* backdrop-filter: blur(18px);*/
  box-shadow: var(--mv-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* 去掉你之前手动加的高度限制，交给 JS 控制 */
#game-area {
  min-height: 0;
  position: relative;
  margin: 100px auto 0;
  transform-origin: left top;
}

/* ========== 完成纪念弹窗 ========== */
/* ========== 横屏纪念明信片弹窗 ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(62, 53, 87, 0.55);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-card.modal-landscape {
  margin-top: 400px;
  margin-left: 300px;
  position: relative;
  z-index: 99990;        /* ← 加这个，必须比所有背景层 99970-99975 高 */
  width: 100%;
  max-width: 1320px;
  background: transparent;
  border-radius: 20px;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-card.modal-landscape {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 250, 240, 0.95);
  color: var(--mv-muted);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  z-index: 99992;        /* ← 改成这个 */
  box-shadow: 0 4px 16px rgba(86, 70, 120, 0.2);
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--mv-coral-soft);
  color: var(--mv-coral);
  transform: rotate(90deg);
}

#postcardCanvas {
  width: 100%;
  max-width: 1024px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(86, 70, 120, 0.25);
  background: white;
  display: block;
  z-index: 99991;        /* ← 加这个 */
}

.modal-actions-landscape {
  display: flex;
  gap: 14px;
  justify-content: center;
  z-index: 99991;        /* ← 加这个 */
}

.modal-btn {
  height: 46px;
  padding: 0 28px;
  border-radius: 14px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.secondary-btn {
  background: rgba(255, 250, 240, 0.95);
  color: var(--mv-ink);
  border: 1px solid rgba(201, 182, 255, 0.35);
  box-shadow: 0 4px 14px rgba(86, 70, 120, 0.08);
}

.secondary-btn:hover {
  background: rgba(201, 182, 255, 0.2);
  transform: translateY(-2px);
}

/* 庆祝粒子 */
.celebration-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: particleFloat 1.2s ease-out forwards;
}

@keyframes particleFloat {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* =========================
   白羊座星系背景：大厂级重制版
   ========================= */

.aries-galaxy-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.aries-galaxy-layer.visible {
  opacity: 1;
}

/* 深空背景 - 多层径向渐变营造宇宙深度 */
.aries-deep-space {
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(88, 60, 160, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 80%, rgba(60, 100, 180, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20, 15, 40, 0.4) 0%, transparent 70%);
  filter: blur(40px);
  animation: ariesNebulaDrift 20s ease-in-out infinite alternate;
}

@keyframes ariesNebulaDrift {
  0% { transform: translate(-2%, -1%) scale(1.02); }
  100% { transform: translate(2%, 1%) scale(0.98); }
}

/* SVG 星座图 - 偏右上 */
.aries-constellation {
  position: absolute;
  right: 8%;
  top: 9%;
  width: min(48vw, 600px);
  height: min(48vw, 600px);
  overflow: visible;
  opacity: 0;
  transition: opacity 1s ease;
}

/* 连线样式 */
.aries-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.aries-line.main {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(180, 160, 255, 0.6));
}

.aries-line.secondary {
  stroke-width: 1.2;
  filter: drop-shadow(0 0 3px rgba(140, 180, 255, 0.4));
}

/* 星星基础 */
.aries-star {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aries-star.major {
  animation: ariesStarBreath 3s ease-in-out infinite;
}

.aries-star.major:nth-child(2) { animation-delay: 0.5s; }
.aries-star.major:nth-child(3) { animation-delay: 1s; }

@keyframes ariesStarBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 光晕层 */
.aries-halo {
  opacity: 0;
  transition: opacity 1s ease;
  mix-blend-mode: screen;
}

/* 粒子尘埃 */
.aries-dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,240,0.9) 0%, transparent 70%);
  pointer-events: none;
  animation: ariesDustFloat 8s ease-in-out infinite;
}

@keyframes ariesDustFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(10px, -15px) scale(1.1); opacity: 0.3; }
  66% { transform: translate(-8px, 8px) scale(0.9); opacity: 0.5; }
}

/* 完成态 */
.aries-galaxy-layer.completed .aries-line {
  opacity: 1;
  animation: ariesLinePulse 4s ease-in-out infinite;
}

.aries-galaxy-layer.completed .aries-star {
  opacity: 1;
  --star-opacity: 1;
}

.aries-galaxy-layer.completed .aries-halo {
  opacity: 0.6;
}

.aries-galaxy-layer.completed .aries-constellation {
  opacity: 1;
}

@keyframes ariesLinePulse {
  0%, 100% { stroke-opacity: 0.9; filter: drop-shadow(0 0 8px rgba(180, 160, 255, 0.5)); }
  50% { stroke-opacity: 1; filter: drop-shadow(0 0 16px rgba(200, 180, 255, 0.8)); }
}

/* 终局爆发 */
.aries-galaxy-layer.aries-finale .aries-star.major {
  animation: ariesStarBurst 1.5s ease-out forwards;
}

@keyframes ariesStarBurst {
  0% { transform: scale(1); }
  30% { transform: scale(2.5); filter: drop-shadow(0 0 20px rgba(255, 220, 150, 1)); }
  100% { transform: scale(1.2); }
}

/* 终局粒子 */
.finale-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.finale-particle.diamond {
  border-radius: 2px;
  transform: rotate(45deg);
}

.finale-shockwave {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(255, 250, 240, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  box-shadow: 
    0 0 40px rgba(180, 160, 255, 0.6),
    inset 0 0 40px rgba(255, 220, 180, 0.3);
}

.finale-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 240, 0.3) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 白羊座符号 */
.aries-symbol {
  position: absolute;
  right: min(10vw, 120px);
  top: min(12vw, 120px);
  font-size: clamp(42px, 7vw, 92px);
  line-height: 1;
  color: rgba(255, 250, 240, 0.15);
  text-shadow:
    0 0 18px rgba(255, 250, 240, 0.4),
    0 0 42px rgba(201, 182, 255, 0.32);
  transform: rotate(-8deg);
  transition: opacity 800ms ease;
  opacity: 0;
}

.aries-galaxy-layer.completed .aries-symbol {
  opacity: 0.3;
}

/* 尊重系统减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .aries-deep-space,
  .aries-star,
  .aries-dust {
    animation: none !important;
  }

  .aries-galaxy-layer.aries-finale,
  .aries-galaxy-layer.aries-finale .aries-star,
  .finale-shockwave,
  .finale-flash {
    animation: none !important;
  }
}

/* =========================
   弹窗宇宙穹顶背景（6层纵深）
   ========================= */

/* Layer 1: 深空底色 */
.modal-cosmos {
  position: fixed !important;
  inset: 0;
  z-index: 99970;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 20% 30%, rgba(40, 25, 80, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 80% 70%, rgba(25, 40, 90, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(15, 12, 35, 0.95) 0%, rgba(8, 6, 22, 1) 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.modal-overlay.show .modal-cosmos {
  opacity: 1;
}

/* Layer 2: 银河光带 */
.modal-milkyway {
  position: fixed;
  inset: -20%;
  z-index: 99971;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 30%, rgba(201, 182, 255, 0.08) 45%, rgba(255, 250, 240, 0.06) 50%, rgba(185, 221, 255, 0.08) 55%, transparent 70%),
    linear-gradient(45deg, transparent 20%, rgba(158, 230, 212, 0.05) 40%, transparent 60%);
  filter: blur(60px);
  animation: milkywayDrift 25s ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity 1.5s ease 0.3s;
}

.modal-overlay.show .modal-milkyway {
  opacity: 1;
}

@keyframes milkywayDrift {
  0% { transform: translate(-2%, -1%) rotate(-2deg) scale(1.05); }
  100% { transform: translate(2%, 1%) rotate(2deg) scale(0.95); }
}

/* Layer 3: 巨型星座网 */
.modal-constellation-net {
  position: fixed;
  inset: 0;
  z-index: 99972;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease 0.5s;
}

.modal-overlay.show .modal-constellation-net {
  opacity: 1;
}

.modal-constellation-net svg {
  position: fixed;
  left: 60%;
  top: 55%;              /* ← 改这里：50% → 62%（或 65%），越大越靠下 */
  width: 70vmax;        /* ← 改这里：150vmax → 110vmax，避免散太开 */
  height: 70vmax;
  transform: translate(-50%, -50%);
}

.constellation-net-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: netLineAppear 2s ease forwards;
}

.constellation-net-line.aries {
  stroke: rgba(255, 230, 180, 0.35);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(255, 230, 180, 0.25));
}

.constellation-net-line.orion {
  stroke: rgba(201, 182, 255, 0.3);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(201, 182, 255, 0.2));
}

.constellation-net-line.cassiopeia {
  stroke: rgba(185, 221, 255, 0.28);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(185, 221, 255, 0.2));
}

.constellation-net-star {
  opacity: 0;
  animation: netStarAppear 1.5s ease forwards;
}

@keyframes netLineAppear {
  from { opacity: 0; stroke-dashoffset: var(--line-length); }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes netStarAppear {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 0.7; transform: scale(1); }
}

/* Layer 5: 流星 */
.modal-meteor {
  position: fixed;
  pointer-events: none;
  z-index: 99974;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 250, 240, 0.9), rgba(201, 182, 255, 0.4), transparent);
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 250, 240, 0.6));
  opacity: 0;
  animation: meteorShoot 1.2s ease-out forwards;
}

@keyframes meteorShoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(-45deg) scaleX(0.3); }
  20% { opacity: 1; transform: translate(-20px, 20px) rotate(-45deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-300px, 300px) rotate(-45deg) scaleX(0.5); }
}

/* Layer 6: 前景星尘场 */
.modal-dust-field {
  position: fixed;
  inset: 0;
  z-index: 99975;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease 0.8s;
}

.modal-overlay.show .modal-dust-field {
  opacity: 1;
}

.modal-dust-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: dustFloat linear infinite;
}

@keyframes dustFloat {
  0% { transform: translate(0, 0) scale(1); opacity: var(--dust-opacity); }
  25% { transform: translate(var(--tx1), var(--ty1)) scale(1.1); }
  50% { transform: translate(var(--tx2), var(--ty2)) scale(0.9); opacity: calc(var(--dust-opacity) * 0.6); }
  75% { transform: translate(var(--tx3), var(--ty3)) scale(1.05); }
  100% { transform: translate(var(--tx4), var(--ty4)) scale(1); opacity: var(--dust-opacity); }
}

/* 中央光晕透镜效果 - 让明信片像从光中浮现 */
.modal-central-glow {
  position: fixed !important;     /* ← 加这个 */
  inset: 0;            /* ← 加这个 */
  margin: auto;        /* ← 加这个，配合 fixed 居中 */
  width: 160vmin;      /* 可以顺便改小一点 */
  height: 160vmin;
  background: 
    radial-gradient(circle at 50% 48%, rgba(255, 250, 240, 0.25) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 180, 0.2) 0%, transparent 35%),
    radial-gradient(circle at 50% 52%, rgba(201, 182, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(158, 230, 212, 0.1) 0%, transparent 55%);
  filter: blur(100px);
  opacity: 0.9;
}

.modal-overlay.show .modal-central-glow {
  opacity: 1;
}

/* =========================
   弹窗宇宙背景与明信片柔和过渡
   ========================= */

/* 1. 宇宙背景中央加"舞台聚光灯"，不是纯黑 */
.modal-cosmos {
  position: fixed;
  background:
    /* 中央舞台光：明信片正后方是暗紫蓝，向四周渐变成深空 */
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(55, 40, 95, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 55%, rgba(40, 30, 75, 0.5) 0%, transparent 45%),
    /* 四角深空保留 */
    radial-gradient(ellipse 120% 80% at 15% 20%, rgba(35, 20, 70, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 85% 80%, rgba(25, 35, 85, 0.45) 0%, transparent 50%),
    /* 最底层：极深蓝灰，不要死黑 */
    radial-gradient(circle at 50% 50%, rgba(22, 18, 42, 0.96) 0%, rgba(10, 8, 24, 1) 100%);
}

/* 2. 中央光晕扩大、变淡，专门托住明信片 */
.modal-central-glow {
  width: 120vmin;
  height: 120vmin;
  background: 
    radial-gradient(circle at 50% 45%, rgba(201, 182, 255, 0.18) 0%, rgba(255, 250, 240, 0.08) 20%, transparent 55%);
  filter: blur(80px);
}

/* 3. 明信片卡片外围：呼吸光池（过渡核心） */
.modal-card.modal-landscape::before {
  content: "";
  position: absolute;
  inset: -60px;
  border-radius: 40px;
  background:
    /* 新增：极亮的紧贴核心 */
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(255, 250, 240, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 250, 240, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 75% 65% at 50% 50%, rgba(201, 182, 255, 0.3) 0%, transparent 55%);
  filter: blur(30px);
  z-index: -1;
  animation: atmosphereLayer1 4s ease-in-out infinite;
}

@keyframes postcardGlowBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* 4. Canvas 本体：多层发光+内阴影，让边缘柔和 */
#postcardCanvas {
  position: relative;
  z-index: 99991;
  border-radius: 16px;
  /* 内阴影：边缘向内淡入，消除硬边 */
  box-shadow:
    inset 0 0 30px rgba(255, 250, 240, 0.15),      /* 内发光 */
    inset 0 0 60px rgba(201, 182, 255, 0.08),      /* 内淡紫 */
    0 0 0 1px rgba(255, 250, 240, 0.2),             /* 极细白边 */
    0 0 40px rgba(201, 182, 255, 0.3),             /* 外淡紫光 */
    0 0 100px rgba(158, 230, 212, 0.15),            /* 外薄荷光 */
    0 24px 60px rgba(0, 0, 0, 0.35);               /* 下沉阴影 */
}

/* 5. 星座网整体调暗 30%，别抢明信片风头 */
.constellation-net-line.aries { stroke: rgba(255, 230, 180, 0.38); }
.constellation-net-line.taurus { stroke: rgba(158, 230, 212, 0.32); }
.constellation-net-star { fill: rgba(255, 250, 240, 0.5); }

/* 6. 银河光带也变淡，避免和明信片亮度冲突 */
.modal-milkyway {
  opacity: 0.6;
}

/* =========================
   明信片大气层过渡（终极版）
   ========================= */

/* 3. 明信片卡片：多层大气层（::before + ::after 叠两层） */
.modal-card.modal-landscape {
  /* 卡片整体轻微悬浮 */
  animation: postcardFloat 6s ease-in-out infinite;
}

/* 第一层大气：紧贴明信片，暖白+淡紫 */
.modal-card.modal-landscape::before {
  content: "";
  position: absolute;
  inset: -60px;
  border-radius: 40px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 250, 240, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 75% 65% at 50% 50%, rgba(201, 182, 255, 0.25) 0%, transparent 55%);
  filter: blur(30px);
  z-index: -1;
  animation: atmosphereLayer1 4s ease-in-out infinite;
}

/* 第二层大气：更远更淡，薄荷+淡紫 */
.modal-card.modal-landscape::after {
  content: "";
  position: absolute;
  inset: -140px;
  border-radius: 60px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 182, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 85% 75% at 50% 50%, rgba(158, 230, 212, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 100% 90% at 50% 50%, rgba(255, 230, 180, 0.08) 0%, transparent 50%);
  filter: blur(60px);
  z-index: -2;
  animation: atmosphereLayer2 5s ease-in-out infinite;
}

/* 第三层：用单独元素，底部反射光（像水面倒影） */
.modal-card-reflection {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -40%;
  height: 60%;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 250, 240, 0.12) 0%, transparent 60%);
  filter: blur(40px);
  z-index: -3;
  pointer-events: none;
  animation: reflectionPulse 7s ease-in-out infinite;
}

/* 4. Canvas 本体：极强的边缘溢光 */
#postcardCanvas {
  position: relative;
  z-index: 99991;
  border-radius: 16px;
  /* 内发光：边缘向内溶解 */
  box-shadow:
    /* 极细白边——定义轮廓 */
    0 0 0 1px rgba(255, 250, 240, 0.3),
    /* 第一层外发光：暖白，紧贴 */
    0 0 20px rgba(255, 250, 240, 0.25),
    0 0 60px rgba(255, 250, 240, 0.15),
    /* 第二层外发光：淡紫 */
    0 0 40px rgba(201, 182, 255, 0.35),
    0 0 100px rgba(201, 182, 255, 0.2),
    /* 第三层外发光：薄荷，最远 */
    0 0 80px rgba(158, 230, 212, 0.2),
    0 0 160px rgba(158, 230, 212, 0.1),
    /* 下沉阴影：让卡片有厚度 */
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.3);
  /* 内阴影：让边缘像从内部发光 */
  filter: drop-shadow(0 0 10px rgba(255, 250, 240, 0.1));
}

/* 5. 动画定义 */
@keyframes postcardFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes atmosphereLayer1 {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes atmosphereLayer2 {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes reflectionPulse {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.1); }
}

.constellation-net-line.bridge { 
  stroke: rgba(201, 182, 255, 0.15); 
  stroke-width: 1;
}

/* =========================
   拖尾粒子
   ========================= */

.drag-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  mix-blend-mode: screen;
}

/* =========================
   正确放置波纹
   ========================= */

@keyframes correctRippleExpand {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes correctFlashFade {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2.5); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* =========================
   背景梦境粒子层
   ========================= */

.dream-particles-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dream-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: dreamFloat linear infinite;
  mix-blend-mode: screen;
}

@keyframes dreamFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(15px, -20px) scale(1.2); opacity: 0.6; }
  50% { transform: translate(-10px, 10px) scale(0.8); opacity: 0.4; }
  75% { transform: translate(20px, 15px) scale(1.05); opacity: 0.5; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}

/* =========================
   行列标签
   ========================= */

.piece-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(62, 53, 87, 0.82);
  color: #fffaf0;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(86, 70, 120, 0.3);
  border: 1px solid rgba(255, 250, 240, 0.2);
  transition: opacity 0.2s ease;
}

/* =========================
   邻居高亮提示
   ========================= */

.piece.neighbor-hint {
  animation: neighborPulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(246, 199, 111, 1))
    drop-shadow(0 0 28px rgba(246, 199, 111, 0.7))
    drop-shadow(0 8px 16px rgba(86, 70, 120, 0.2));
  z-index: 9998 !important;
}

@keyframes neighborPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* =========================
   组合成功特效增强
   ========================= */

.merge-flash {
  position: absolute;
  pointer-events: none;
  z-index: 9998;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(201, 182, 255, 0.7) 25%, rgba(201, 182, 255, 0.25) 50%, transparent 70%);
  animation: mergeFlash 900ms ease-out forwards;
}

.merge-flash::before,
.merge-flash::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 20px;
  border: 2.5px solid rgba(201, 182, 255, 0.75);
  transform: rotate(45deg);
}

.merge-flash::after {
  inset: 40px;
  border-color: rgba(158, 230, 212, 0.7);
  animation: mergeDiamond 900ms ease-out forwards;
}

@keyframes mergeFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes mergeDiamond {
  0% { transform: rotate(45deg) scale(0.4); opacity: 1; }
  100% { transform: rotate(45deg) scale(2.2); opacity: 0; }
}

.piece.just-merged {
  animation: pieceMergedPulse 650ms ease-out;
}

@keyframes pieceMergedPulse {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(201, 182, 255, 0)) drop-shadow(0 10px 16px rgba(86, 70, 120, 0.13)); }
  40% { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 0 18px rgba(201, 182, 255, 1)) drop-shadow(0 0 12px rgba(255, 250, 240, 0.95)) drop-shadow(0 0 6px rgba(158, 230, 212, 0.8)) drop-shadow(0 18px 28px rgba(86, 70, 120, 0.18)); }
  100% { transform: translateY(0) scale(1); }
}

/* =========================
   完成时拼图区整体发光
   ========================= */

#board.completed-glow {
  animation: boardCompleteGlow 2s ease-in-out infinite;
}

@keyframes boardCompleteGlow {
  0%, 100% {
    box-shadow:
      26px 28px 0 rgba(201, 182, 255, 0.35),
      52px 54px 0 rgba(158, 230, 212, 0.25),
      0 28px 70px rgba(86, 70, 120, 0.22),
      0 0 60px rgba(158, 230, 212, 0.3),
      0 0 120px rgba(201, 182, 255, 0.2);
  }
  50% {
    box-shadow:
      26px 28px 0 rgba(201, 182, 255, 0.45),
      52px 54px 0 rgba(158, 230, 212, 0.35),
      0 28px 70px rgba(86, 70, 120, 0.28),
      0 0 80px rgba(158, 230, 212, 0.4),
      0 0 160px rgba(201, 182, 255, 0.3);
  }
}

/* =========================
   白羊座星系修复
   ========================= */

.aries-galaxy-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.aries-galaxy-layer.visible {
  opacity: 1;
}

.aries-deep-space {
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(88, 60, 160, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 70% 80%, rgba(60, 100, 180, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20, 15, 40, 0.5) 0%, transparent 65%);
  filter: blur(40px);
  animation: ariesNebulaDrift 20s ease-in-out infinite alternate;
}

.aries-constellation {
  position: absolute;
  right: 5%;
  top: 18%;
  width: min(52vw, 680px);
  height: min(52vw, 680px);
  overflow: visible;
  opacity: 0;
  transition: opacity 1s ease;
}

.aries-galaxy-layer.visible .aries-constellation {
  opacity: 1;
}

.aries-line.main {
  stroke-width: 2.8;
  filter: drop-shadow(0 0 8px rgba(180, 160, 255, 0.7));
}

.aries-line.secondary {
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(140, 180, 255, 0.5));
}

/* ============ 开场云层遮罩 ============ */
/* ---------- 开场遮罩：梦境云层 ---------- */
#intro-overlay {
  position: fixed; inset: 0; z-index: 9997;
  background: linear-gradient(160deg,
    #1a1633 0%, #241d42 30%, #2d2450 55%, #1f1a3d 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.4s ease;
}
#intro-overlay.disperse { opacity: 0; pointer-events: none; }

/* ---------- 极光光晕（缓慢流动） ---------- */
.aurora {
  position: absolute; width: 70vmax; height: 70vmax;
  border-radius: 50%; filter: blur(60px); opacity: .35;
  mix-blend-mode: screen; pointer-events: none;
  animation: auroraDrift 14s ease-in-out infinite alternate;
}
.aurora {
  left: -15%; top: -20%;
  background: radial-gradient(circle, rgba(140,120,255,.5), transparent 65%);
}
.aurora-2 {
  left: auto; top: auto; right: -20%; bottom: -25%;
  background: radial-gradient(circle, rgba(255,170,220,.4), transparent 65%);
  animation-duration: 18s; animation-delay: -6s;
}
@keyframes auroraDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(8%, 10%) scale(1.15); }
}

/* ---------- 云团 ---------- */
/* ===== 开场：2D 卡通插画云层 ===== */
#intro-overlay {
  position: fixed; inset: 0; z-index: 9997;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #8fb2ee 0%, #b1a4ec 45%, #ecc3e6 100%);
  transition: opacity .7s ease 1.2s;
}
#intro-overlay.disperse { opacity: 0; pointer-events: none; }

.cloud-layer { position: absolute; inset: 0; pointer-events: none; }
.layer-far  { z-index: 2; }
.layer-mid  { z-index: 3; }
.layer-near { z-index: 4; }

/* 云朵（JS 生成的 SVG） */
.cloud {
  position: absolute;
  animation: cloudBob var(--dur, 6s) ease-in-out var(--dl, 0s) infinite alternate;
  transition:
    transform 1.3s cubic-bezier(.55, .06, .68, .19) var(--dd, 0s),
    opacity 1s ease var(--dd, 0s);
  will-change: transform;
}
@keyframes cloudBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* 散开：每朵云沿自己的方向飞走（停掉漂浮动画，让位给飞走过渡） */
#intro-overlay.disperse .cloud {
  animation: none;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.06);
  opacity: 0;
}

/* 月亮 */
.moon {
  position: absolute; left: 7%; top: 8%; width: 110px; z-index: 1;
  animation: moonFloat 7s ease-in-out infinite alternate;
  transition: opacity .8s ease .25s, transform 1.1s ease .25s;
}
@keyframes moonFloat {
  from { transform: translateY(0) rotate(-6deg); }
  to   { transform: translateY(-12px) rotate(-2deg); }
}
#intro-overlay.disperse .moon {
  animation: none; opacity: 0;
  transform: translateY(-50px) rotate(8deg);
}

/* 星星（四角闪光，平面形） */
.star {
  position: absolute; z-index: 1; pointer-events: none;
  animation: twinkle var(--dur, 2.5s) ease-in-out var(--dl, 0s) infinite alternate;
  transition: opacity .5s ease .2s;
}
@keyframes twinkle {
  from { transform: scale(.55); opacity: .35; }
  to   { transform: scale(1.1); opacity: 1; }
}
#intro-overlay.disperse .star { opacity: 0; }

/* 按钮：扁平贴纸风（硬边 offset 阴影，无渐变无发光） */
#startBtn {
  position: relative; z-index: 10;
  padding: 16px 54px;
  font-size: 20px; letter-spacing: .3em; text-indent: .3em;
  color: #5b4b8a; background: #fffdf8;
  border: 3px solid #8f7fd4; border-radius: 999px;
  box-shadow: 0 6px 0 #c9bdf0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .4s ease;
}
#startBtn:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 #c9bdf0; }
#startBtn:active { transform: translateY(4px);  box-shadow: 0 2px 0 #c9bdf0; }
#intro-overlay.disperse #startBtn {
  transform: translateY(10px) scale(.9); opacity: 0;
}

/* ---------- 开始按钮：梦境质感 ---------- */
#startBtn {
  position: relative; z-index: 10;
  padding: 18px 58px; border: none; border-radius: 999px;
  font-size: 20px; letter-spacing: .35em; text-indent: .35em;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, rgba(160,140,255,.9), rgba(255,170,215,.85));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 8px 32px rgba(140,120,255,.45),
    0 0 60px rgba(255,180,230,.3);
  backdrop-filter: blur(4px);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  animation: btnPulse 2.6s ease-in-out infinite;
}
#startBtn:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 12px 44px rgba(150,125,255,.6),
    0 0 90px rgba(255,180,230,.45);
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 8px 32px rgba(140,120,255,.45), 0 0 60px rgba(255,180,230,.3); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 8px 40px rgba(150,125,255,.6), 0 0 85px rgba(255,180,230,.5); }
}

/* ---------- 散开动画：雾化的关键 ---------- */
#intro-overlay.disperse .bank-front {
  transform: translateY(-12vh) scale(1.25);
  opacity: 0; filter: blur(24px);
}
#intro-overlay.disperse .bank-mid {
  transform: translateY(-8vh) scale(1.15);
  opacity: 0; filter: blur(30px);
  transition-delay: .15s;
}
#intro-overlay.disperse .bank-back {
  transform: translateY(-5vh) scale(1.08);
  opacity: 0; filter: blur(36px);
  transition-delay: .3s;
}
#intro-overlay.disperse .aurora { opacity: 0; transition: opacity 1s ease .2s; }
#intro-overlay.disperse #startBtn {
  transform: scale(.85); opacity: 0;
  transition: transform .5s ease, opacity .5s ease;
}


/* 拼图飘入期间禁止拖拽 */
.pieces-locked .piece { pointer-events: none; }

.postcard{
  position:relative;
  display: inline-block;
  width:min(920px,94vw);
  max-width: 100%;
  margin:0 auto;
  container-type:inline-size;   /* 字体随明信片大小缩放 */
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(70,50,100,.35);
}

.pc-bg {
  display: block;
  width: 100%;                  /* 图片自适应容器宽度 */
  height: auto;
  position: relative;
  z-index: 1;                   /* 图片在底层 */
}

/* 文字内容层：覆盖在图片上 */
.pc-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;  /* ★ 比 modal-card(99990) 高 */
  pointer-events: none;
}
.postcard img{ width:100%; display:block; }

/* ===== 右侧横线上的字 ===== */
.pc-lines {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 35%;
  font-family: "Ma Shan Zheng", cursive;
  font-size: 2.2cqw;  /* 用容器单位，比 vw 更精准 */
  line-height: 2.2;
  color: #5b4b8a;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.pc-lines span {
  display: block;
  /* ★ 关键微调：让文字基线对齐横线 */
  margin-bottom: -0.5em;        /* 负 margin 把文字压到线上 */
  padding-bottom: 0.5em;        /* 保持视觉间距 */
}

/* ===== 左侧情书 ===== */
.pc-letter {
  position: absolute;
  top: 20%;
  left: 6%;
  width: 40%;
  font-family: "Long Cang", cursive;
  font-size: 1.8cqw;
  line-height: 1.8;
  color: #46405f;
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.pc-letter p{ margin:0; }
.pc-sign {
  margin-top: 2em;
  text-align: right;
  font-size: 1.5vw;             /* 落款再小一点 */
}

.pc-rules {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 35%;
  height: 40%;
  pointer-events: none;
}
.pc-rules .line {
  border-bottom: 1px solid #c9b6ff;
  margin-bottom: 1.2em;
  height: 1.2em;
}

/* 书写中的光标 */
#letterBody.writing::after{
  content:""; display:inline-block;
  width:2px; height:1em; margin-left:2px;
  background:currentColor; vertical-align:-.12em;
  animation:pcBlink .8s steps(1) infinite;
}
@keyframes pcBlink{ 50%{opacity:0} }