@import "./skins/gloomy-rain.css";
/* ============ 顶部栏 ============ */
.top-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  gap: 6px;
  height: 52px; padding: 0 6px;
  padding-top: env(safe-area-inset-top);
  height: calc(52px + env(safe-area-inset-top));
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--color-border);
}
.top-bar-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.top-bar-btn:active { background: var(--color-bg-tertiary); color: var(--color-text-primary); }

/* ============ 头像 ============ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  font-weight: 400;
}
.avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.avatar-fallback { letter-spacing: 0; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  letter-spacing: 2px;
  transition: transform 0.15s, background 0.2s, opacity 0.2s;
  min-height: 40px;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-primary { background: var(--color-accent); color: var(--color-bg-primary); }
.btn-secondary { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-block { width: 100%; }

/* ============ 表单 ============ */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
}
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-accent);
}
.textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.field-hint { font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 1px; }

.row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============ 列表行 ============ */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
  min-height: 68px;
}
.list-row:active { background: var(--color-bg-secondary); }
.list-row-body { flex: 1; min-width: 0; }
.list-row-title {
  font-size: 15px;
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 3px;
}
.list-row-sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: 1px;
}
.list-row-aside {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* ============ 空状态 ============ */
.empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--color-text-tertiary);
}
.empty-state-icon {
  margin-bottom: 16px;
  opacity: 0.6;
  color: var(--color-text-secondary);
}
.empty-state-title {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.empty-state-sub { font-size: 12px; line-height: 1.8; letter-spacing: 1px; }

/* ============ 悬浮按钮 ============ */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-bg-primary);
  box-shadow: 0 6px 20px var(--color-shadow);
  z-index: 15;
  transition: transform 0.2s;
}
.fab:active { transform: scale(0.9); }
@media (min-width: 640px) {
  .fab { right: calc(50vw - 240px + 20px); }
}

/* ============ Sheet ============ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.24s;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  width: 100%; max-width: 480px;
  background: var(--color-bg-primary);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 8px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}
.sheet-backdrop.open .sheet { transform: translateY(0); }
.sheet-handle {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--color-text-tertiary);
  opacity: 0.35;
  margin: 6px auto 12px;
}
.sheet-title {
  font-size: 14px; letter-spacing: 3px;
  color: var(--color-text-primary);
  text-align: center; margin-bottom: 14px;
}
.sheet-body { color: var(--color-text-primary); }
.sheet-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.sheet-actions .btn { flex: 1; }
.confirm-text {
  padding: 12px 4px 4px;
  font-size: 14px; line-height: 1.7;
  color: var(--color-text-secondary);
  letter-spacing: 1px;
  text-align: center;
}

/* Sheet 里的角色/字卡库选择列表 */
.sheet-list { display: flex; flex-direction: column; }
.sheet-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.sheet-list-item:last-child { border-bottom: none; }
.sheet-list-item:active { background: var(--color-bg-secondary); }
.sheet-list-body { flex: 1; min-width: 0; }
.sheet-list-title { font-size: 14px; color: var(--color-text-primary); margin-bottom: 2px; }
.sheet-list-sub { font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 1px; }
.sheet-list-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-accent); flex-shrink: 0;
}
.sheet-list-item.selected .sheet-list-check {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg-primary);
}

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 14%;
  transform: translate(-50%, 10px);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 13px; letter-spacing: 1px;
  z-index: 9999; pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s, transform 0.24s;
  max-width: 80vw; text-align: center;
}
.toast.open { opacity: 1; transform: translate(-50%, 0); }

/* ============ 通用 chip ============ */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; letter-spacing: 1px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
/* ============ 屏幕中央悬浮思考/打字卡片 ============ */
.center-typing-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 220px;
  padding: 24px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: centerFadeIn 0.3s ease-out;
}
.center-typing-avatar {
  margin-bottom: 12px;
}
.center-typing-avatar .avatar {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
}
.center-typing-name {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.center-typing-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 1px;
  text-align: center;
  margin-top: 10px;
  max-width: 90%;
  line-height: 1.4;
}
.center-typing-loading {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  height: 12px;
}
.center-typing-loading .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: centerTypingBounce 1.4s infinite ease-in-out both;
}
.center-typing-loading .dot:nth-child(1) { animation-delay: -0.32s; }
.center-typing-loading .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes centerFadeIn {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes centerTypingBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* 草稿箱按钮微调 */
.btn-draft {
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-draft:active {
  color: var(--color-accent);
}
/* 置灰态下的选择题按钮 */
.choice-option[disabled] {
  opacity: 0.65;
  border-style: dashed;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
}
.choice-option.selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg-primary) !important;
}
/* 触发选择题的小按钮 */
.btn-choice-trigger {
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-choice-trigger:active {
  color: var(--color-accent);
}

/* ===============================
   Global Call UI
   通话界面：全屏 / 缩小悬浮球 / 波纹 / 心电图 / 心跳按钮
================================ */

/* 全局通话容器 */
#global-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  font-family: inherit;
}

#global-call-overlay.global-call-active {
  pointer-events: auto;
}

/* 全屏通话主容器 */
.global-call-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 22%, rgba(120, 180, 255, 0.18), transparent 38%),
    radial-gradient(circle at 80% 72%, rgba(190, 120, 255, 0.14), transparent 34%),
    linear-gradient(160deg, #080b14 0%, #121626 48%, #08090f 100%);
}

/* 背景头像图 */
.global-call-bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.58) saturate(1.15);
  transform: scale(1.12);
  opacity: 0.78;
}

/* 遮罩层 */
.global-call-mask {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center 24%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(
      to bottom,
      rgba(6, 8, 14, 0.36) 0%,
      rgba(6, 8, 14, 0.68) 56%,
      rgba(6, 8, 14, 0.9) 100%
    );
}

/* 装饰层：波纹 / 心电图 */
.global-call-visual-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 内容层 */
.global-call-content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding:
    calc(76px + env(safe-area-inset-top))
    24px
    calc(42px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 右上角缩小按钮 */
.global-call-minimize-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.global-call-minimize-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(120, 180, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.global-call-minimize-btn:active {
  transform: scale(0.94);
}

/* 头像外层 */
.global-call-avatar-wrapper {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.global-call-avatar-wrapper img,
.global-call-avatar-wrapper .avatar,
.global-call-avatar-wrapper > * {
  border-radius: 999px;
}

/* 头像呼吸 */
.global-call-avatar-wrapper.breath {
  animation: callAvatarBreath 2.7s ease-in-out infinite;
}

/* 通话中头像轻微脉冲 */
.global-call-avatar-wrapper.pulse {
  animation: callAvatarPulse 1.9s ease-in-out infinite;
}

@keyframes callAvatarBreath {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.08);
  }
}

@keyframes callAvatarPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 0 rgba(120, 180, 255, 0);
  }
  50% {
    transform: scale(1.045);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 38px rgba(120, 180, 255, 0.26);
  }
}

/* 名字 */
.global-call-name {
  margin: 22px 0 0;
  max-width: min(320px, 82vw);
  font-size: 25px;
  line-height: 1.24;
  font-weight: 760;
  text-align: center;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 状态文字 */
.global-call-status {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.72);
  text-align: center;
  letter-spacing: 0.08em;
}

/* 通话计时 */
.global-call-time {
  margin-top: 16px;
  min-width: 92px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255,255,255,0.94);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===============================
   拨号波纹效果
================================ */

.global-call-wave-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.global-call-wave {
  position: absolute;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border: 1px solid rgba(130, 190, 255, 0.32);
  background:
    radial-gradient(circle, rgba(130, 190, 255, 0.08) 0%, transparent 62%);
  box-shadow:
    0 0 28px rgba(120, 180, 255, 0.14),
    inset 0 0 26px rgba(160, 210, 255, 0.08);
  opacity: 0;
  animation: callWaveExpand 2.8s infinite ease-out;
}

.global-call-wave.wave-1 {
  animation-delay: 0s;
}

.global-call-wave.wave-2 {
  animation-delay: 0.85s;
}

.global-call-wave.wave-3 {
  animation-delay: 1.7s;
}

@keyframes callWaveExpand {
  0% {
    transform: scale(0.34);
    opacity: 0;
  }
  14% {
    opacity: 0.62;
  }
  52% {
    opacity: 0.22;
  }
  100% {
    transform: scale(1.88);
    opacity: 0;
  }
}

/* ===============================
   心电图 ECG 效果
================================ */

.global-call-ecg {
  position: absolute;
  left: 50%;
  top: calc(50% + 112px);
  transform: translateX(-50%);
  z-index: 1;
  width: min(330px, 82vw);
  height: 58px;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 8px rgba(120, 185, 255, 0.36))
    drop-shadow(0 0 18px rgba(155, 120, 255, 0.14));
  overflow: hidden;
}

.global-call-ecg::before,
.global-call-ecg::after {
  content: "";
  position: absolute;
  top: 0;
  width: 42px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.global-call-ecg::before {
  left: 0;
  background: linear-gradient(to right, rgba(8, 11, 20, 0.8), transparent);
}

.global-call-ecg::after {
  right: 0;
  background: linear-gradient(to left, rgba(8, 11, 20, 0.8), transparent);
}

.global-call-ecg-svg {
  width: 100%;
  height: 58px;
  overflow: visible;
}

.global-call-ecg-svg path {
  fill: none;
  stroke: rgba(245, 250, 255, 0.96);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
  animation: callEcgFlow 1.75s linear infinite;
}

@keyframes callEcgFlow {
  0% {
    stroke-dashoffset: 430;
    opacity: 0.42;
  }
  16% {
    opacity: 1;
  }
  78% {
    opacity: 0.88;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.42;
  }
}

/* ===============================
   底部按钮区域
================================ */

.global-call-actions {
  margin-top: 54px;
  width: min(340px, 86vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

/* 通话按钮基础 */
.call-btn {
  position: relative;
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.call-btn svg {
  width: 25px;
  height: 25px;
}

/* 按钮内部高光 */
.call-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  z-index: -1;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,0.34), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0));
  pointer-events: none;
}

/* 按钮外发光 */
.call-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  z-index: -2;
  opacity: 0.52;
  filter: blur(14px);
  pointer-events: none;
}

/* 接听按钮 */
.btn-accept {
  background:
    linear-gradient(145deg, #36e58b, #13ba65);
  box-shadow:
    0 18px 34px rgba(19, 186, 101, 0.34),
    0 0 0 1px rgba(255,255,255,0.14) inset;
  animation: callButtonFloat 1.55s ease-in-out infinite;
}

.btn-accept::after {
  background: rgba(30, 226, 126, 0.72);
}

/* 挂断 / 拒接按钮 */
.btn-hangup,
.btn-decline {
  background:
    linear-gradient(145deg, #ff5e6e, #e3293d);
  box-shadow:
    0 18px 34px rgba(227, 41, 61, 0.34),
    0 0 0 1px rgba(255,255,255,0.14) inset;
}

.btn-hangup::after,
.btn-decline::after {
  background: rgba(255, 76, 92, 0.68);
}

/* 拨打/挂断按钮 Hover */
.call-btn:hover {
  transform: translateY(-2px) scale(1.035);
  filter: brightness(1.05);
}

.call-btn:active {
  transform: translateY(0) scale(0.94);
}

/* 电话 SVG 心跳效果 */
.call-icon-heartbeat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  animation: callIconHeartbeat 1.12s infinite ease-in-out;
}

@keyframes callIconHeartbeat {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  18% {
    transform: scale(1.09);
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.24));
  }
  34% {
    transform: scale(0.985);
  }
  56% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.34));
  }
  76% {
    transform: scale(1);
  }
}

/* 按钮轻微悬浮 */
@keyframes callButtonFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.04);
  }
}

/* ===============================
   缩小悬浮球
================================ */

.global-call-minimized {
  pointer-events: none !important;
}

.global-call-minimized .global-call-floating {
  pointer-events: auto;
}

.global-call-floating {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 10002;
  min-width: 198px;
  max-width: calc(100vw - 32px);
  height: 66px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 8px 12px 8px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(145deg, rgba(25, 29, 43, 0.92), rgba(10, 12, 20, 0.86));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(120, 180, 255, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  animation: callFloatingEnter 0.22s ease-out both;
}

.global-call-floating::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,0.12) 42%,
      transparent 62%
    );
  transform: translateX(-40%) rotate(12deg);
  animation: callFloatingShine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.global-call-floating:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.38),
    0 0 36px rgba(120, 180, 255, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.global-call-floating:active {
  transform: scale(0.97);
}

@keyframes callFloatingEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes callFloatingShine {
  0%, 70%, 100% {
    transform: translateX(-48%) rotate(12deg);
    opacity: 0;
  }
  78% {
    opacity: 1;
  }
  92% {
    transform: translateX(48%) rotate(12deg);
    opacity: 0;
  }
}

/* 悬浮球头像 */
.global-call-floating-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16),
    0 0 22px rgba(120, 180, 255, 0.18);
}

.global-call-floating-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(120, 190, 255, 0.36);
  animation: callMiniAvatarPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes callMiniAvatarPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.08);
  }
}

.global-call-floating-avatar img,
.global-call-floating-avatar .avatar,
.global-call-floating-avatar > * {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* 悬浮球文字 */
.global-call-floating-info {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.global-call-floating-name {
  max-width: 106px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.18;
  color: rgba(255,255,255,0.96);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.global-call-floating-status {
  margin-top: 4px;
  max-width: 114px;
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,0.68);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.global-call-mini-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* 悬浮球展开图标 */
.global-call-floating-icon {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  flex: 0 0 auto;
}

/* ===============================
   移动端适配
================================ */

@media (max-width: 480px) {
  .global-call-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .global-call-avatar-wrapper {
    width: 106px;
    height: 106px;
  }

  .global-call-name {
    font-size: 23px;
  }

  .global-call-status {
    font-size: 13px;
  }

  .global-call-actions {
    margin-top: 50px;
    gap: 30px;
  }

  .call-btn {
    width: 66px;
    height: 66px;
  }

  .global-call-ecg {
    top: calc(50% + 108px);
    width: min(310px, 84vw);
  }

  .global-call-wave {
    width: 166px;
    height: 166px;
  }

  .global-call-floating {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    min-width: 184px;
    height: 64px;
  }
}

/* 小高度屏幕适配 */
@media (max-height: 660px) {
  .global-call-content {
    justify-content: center;
    padding-top: calc(58px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .global-call-avatar-wrapper {
    width: 96px;
    height: 96px;
  }

  .global-call-name {
    margin-top: 16px;
    font-size: 22px;
  }

  .global-call-actions {
    margin-top: 38px;
  }

  .global-call-ecg {
    top: calc(50% + 92px);
    height: 48px;
  }

  .global-call-ecg-svg {
    height: 48px;
  }
}

/* ===============================
   减少动态效果偏好
================================ */

@media (prefers-reduced-motion: reduce) {
  .global-call-wave,
  .global-call-ecg-svg path,
  .call-icon-heartbeat,
  .btn-accept,
  .global-call-avatar-wrapper.breath,
  .global-call-avatar-wrapper.pulse,
  .global-call-floating,
  .global-call-floating::before,
  .global-call-floating-avatar::after {
    animation: none !important;
  }

  .global-call-minimize-btn,
  .call-btn,
  .global-call-floating {
    transition: none !important;
  }
}
/* ============ 中央卡片梦幻霓虹效果 ============ */
.center-typing-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 240px;
  padding: 28px 20px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(25px) saturate(1.8);
  -webkit-backdrop-filter: blur(25px) saturate(1.8);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: centerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ 共时星骰 (D12) 华丽动效 ============ */
.dice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  perspective: 1000px;
}

/* 旋转的星骰主体 */
.d12-dice-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  margin-bottom: 24px;
}

/* 骰子快速自旋动画 */
.d12-dice-wrapper.rolling {
  animation: rollD12 1.8s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}

/* 两层干涉旋转的几何环 */
.d12-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}
.d12-ring-inner {
  position: absolute;
  inset: 15px;
  border: 1.5px dashed rgba(236, 72, 153, 0.4);
  border-radius: 50%;
  animation: rotateClockwise 8s linear infinite;
}
.d12-geometric-shape {
  position: absolute;
  inset: 5px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 95%, 25% 95%, 0% 60%, 10% 20%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: rotateCounterClockwise 12s linear infinite;
}

/* 骰子中心发光字 */
.d12-center-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--color-accent), 0 0 15px var(--color-accent);
  transition: opacity 0.3s, transform 0.3s;
}

/* 占卜谶语展示卡片 */
.dice-result-card {
  width: 100%;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-top: 10px;
  text-align: center;
  backdrop-filter: blur(8px);
  animation: fadeInResult 0.5s ease-out;
}
.dice-result-word {
  font-size: 18px;
  color: var(--color-accent);
  margin-bottom: 8px;
  letter-spacing: 4px;
}
.dice-result-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 0 10px;
}
.dice-result-quote {
  font-size: 13px;
  color: var(--color-text-primary);
  border-top: 1px dashed rgba(255,255,255,0.1);
  padding-top: 10px;
  font-style: italic;
}

@keyframes rollD12 {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg) scale(1.1); filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.6)); }
  100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg) scale(1); }
}
@keyframes rotateClockwise {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes rotateCounterClockwise {
  from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
@keyframes fadeInResult {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   全局抽卡动画多主题统一样式命名空间
   ========================================================================== */

/* 1. 主卡片随主题自适应调整尺寸 */
.center-typing-card.shuffling-style-angel,
.center-typing-card.shuffling-style-carousel,
.center-typing-card.shuffling-style-devil,
.center-typing-card.shuffling-style-zodiac {
  min-height: 258px;
  width: 258px;
}
.center-typing-card.shuffling-style-book,
.center-typing-card.shuffling-style-bottle {
  min-height: 236px;
  width: 250px;
}

/* 统一动画容器尺寸 */
.center-typing-card[class*="shuffling-style-"] .center-typing-loading {
  position: relative;
  width: 200px;
  height: 132px;
  margin-bottom: 14px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

/* 特殊：经典洗牌保持原始样式 */
.center-typing-card.shuffling-style-shuffle .center-typing-loading {
  width: 160px;
  height: 78px;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 13px;
}

/* ==================== 1. 经典洗牌 ==================== */
.shuffling-style-shuffle .shuffle-orbit {
  position: relative;
  width: 150px;
  height: 76px;
}
.shuffling-style-shuffle .card-sprite {
  position: absolute;
  left: 50%; top: 50%;
  width: 31px; height: 43px;
  margin-left: -15.5px; margin-top: -21.5px;
  border-radius: 7px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform-origin: center center;
  animation: cardFly 1.65s cubic-bezier(.45,.02,.28,1) infinite;
  opacity: 0;
}
.shuffling-style-shuffle .card-sprite::before {
  content: ""; position: absolute; inset: 5px;
  border-radius: 5px;
  border: 1px solid var(--color-accent-soft);
}
.shuffling-style-shuffle .card-sprite::after {
  content: "✦"; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 10px; color: var(--color-accent);
  opacity: 0.8;
}
.shuffling-style-shuffle .card-sprite:nth-child(1) { animation-delay: 0s; }
.shuffling-style-shuffle .card-sprite:nth-child(2) { animation-delay: -0.18s; scale: 0.94; }
.shuffling-style-shuffle .card-sprite:nth-child(3) { animation-delay: -0.36s; scale: 1.04; }
.shuffling-style-shuffle .card-sprite:nth-child(4) { animation-delay: -0.54s; scale: 0.88; }
.shuffling-style-shuffle .card-sprite:nth-child(5) { animation-delay: -0.72s; scale: 0.98; }
.shuffling-style-shuffle .card-sprite:nth-child(6) { animation-delay: -0.9s; scale: 0.92; }
.shuffling-style-shuffle .card-sprite:nth-child(7) { animation-delay: -1.08s; scale: 1.02; }

.shuffling-style-shuffle .shuffle-glow {
  position: absolute; left: 50%; top: 50%;
  width: 86px; height: 42px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-accent-soft), transparent 68%);
  animation: glowPulse 1.65s ease-in-out infinite;
}
.shuffling-style-shuffle .shuffle-caption {
  position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.12em; color: var(--color-accent);
}

/* ==================== 2. 天使召唤 ==================== */
.angel-box { position: absolute; inset: 0; overflow: hidden; }
.angel-halo {
  position: absolute; left: 50%; top: 52%; width: 118px; height: 118px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), transparent 62%);
  filter: blur(1px); animation: haloPulse 2.8s ease-in-out infinite;
}
.angel-ring {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--color-border);
  border-top-color: var(--color-accent);
  animation: ringSpin 12s linear infinite;
}
.angel-core {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-bg-primary), transparent 72%);
  box-shadow: 0 0 20px var(--color-accent-soft), 0 0 30px rgba(255,255,255,0.4);
  animation: corePulse 2s ease-in-out infinite; z-index: 3;
}
.angel-core::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-bg-primary);
}
.angel-rays {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-accent-soft) 180deg, transparent 360deg);
  opacity: 0.4; filter: blur(1px); animation: ringSpin 10s linear infinite; z-index: 1;
}
.feathers { position: absolute; inset: 0; z-index: 4; }
.feather {
  position: absolute; width: 18px; height: 42px; border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-accent-soft));
  opacity: 0; transform-origin: center bottom; animation: featherRise 3.6s ease-in-out infinite;
}
.feather:nth-child(1) { left: 20px; top: 70px; animation-delay: 0s; }
.feather:nth-child(2) { left: 50px; top: 15px; animation-delay: -0.8s; }
.feather:nth-child(3) { left: 130px; top: 20px; animation-delay: -1.6s; }
.feather:nth-child(4) { left: 160px; top: 80px; animation-delay: -2.2s; }

.stars span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent);
  animation: sparkle 3s ease-in-out infinite;
}
.stars span:nth-child(1) { left: 24px; top: 22px; animation-delay: 0s; }
.stars span:nth-child(2) { left: 162px; top: 24px; animation-delay: -0.7s; }
.stars span:nth-child(3) { left: 32px; top: 96px; animation-delay: -1.4s; }
.stars span:nth-child(4) { left: 154px; top: 94px; animation-delay: -2.1s; }
.stars span:nth-child(5) { left: 98px; top: 12px; animation-delay: -2.4s; }

.angel-notes i {
  position: absolute; font-style: normal; color: var(--color-accent); opacity: 0;
  animation: noteFloat 3.4s ease-in-out infinite;
}
.angel-notes i:nth-child(1) { left: 38px; top: 80px; animation-delay: 0s; }
.angel-notes i:nth-child(2) { left: 148px; top: 72px; animation-delay: -0.9s; }
.angel-notes i:nth-child(3) { left: 92px; top: 18px; animation-delay: -1.8s; }

.angel-label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.14em; color: var(--color-text-secondary); white-space: nowrap; z-index: 6;
}

/* ==================== 3. 旋转木马 ==================== */
.carousel-box { position: absolute; inset: 0; overflow: hidden; }
.carousel-glow {
  position: absolute; left: 50%; top: 52%; width: 124px; height: 92px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), transparent 68%);
  filter: blur(1px); animation: glowPulse 2.6s ease-in-out infinite;
}
.carousel-top {
  position: absolute; left: 50%; top: 16px; width: 118px; height: 24px; transform: translateX(-50%);
  border-radius: 60px 60px 14px 14px;
  background: linear-gradient(135deg, var(--color-bg-primary), var(--color-accent-soft));
  border: 1px solid var(--color-border); z-index: 4;
}
.carousel-top::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg); border-radius: 3px;
  background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent);
}
.carousel-base {
  position: absolute; left: 50%; bottom: 20px; width: 128px; height: 20px; transform: translateX(-50%);
  border-radius: 50%; background: linear-gradient(180deg, var(--color-bg-primary), var(--color-border));
  border: 1px solid var(--color-border); z-index: 3;
}
.carousel-pole {
  position: absolute; left: 50%; top: 32px; width: 3px; height: 72px; transform: translateX(-50%);
  border-radius: 999px; background: linear-gradient(180deg, var(--color-accent), var(--color-border));
  z-index: 2;
}
.carousel-orbit {
  position: absolute; left: 50%; top: 56px; width: 138px; height: 58px; transform: translateX(-50%);
  animation: ringSpin 4.8s linear infinite; transform-origin: 50% 34px; z-index: 2;
}
.carousel-card {
  position: absolute; left: 50%; top: 12px; width: 28px; height: 36px; margin-left: -14px;
  border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-primary);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform-origin: center -22px;
  animation: ponyFloat 1.8s ease-in-out infinite;
}
.carousel-card::after {
  content: "♪"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 10px; color: var(--color-accent);
}
.carousel-card:nth-child(1) { transform: translate(-48px, 8px) scale(0.82) rotate(-7deg); animation-delay: 0s; }
.carousel-card:nth-child(2) { transform: translate(-18px, -2px) scale(0.94) rotate(-2deg); animation-delay: -0.25s; }
.carousel-card:nth-child(3) { transform: translate(18px, -2px) scale(0.94) rotate(2deg); animation-delay: -0.5s; }
.carousel-card:nth-child(4) { transform: translate(48px, 8px) scale(0.82) rotate(7deg); animation-delay: -0.75s; }
.carousel-card:nth-child(5) { transform: translate(0, 12px) scale(0.76) rotate(0deg); animation-delay: -1s; }

.carousel-sparkles span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent); opacity: 0.6; animation: sparkle 2.8s ease-in-out infinite;
}
.carousel-sparkles span:nth-child(1) { left: 24px; top: 24px; animation-delay: 0s; }
.carousel-sparkles span:nth-child(2) { left: 166px; top: 26px; animation-delay: -0.7s; }
.carousel-sparkles span:nth-child(3) { left: 30px; top: 92px; animation-delay: -1.4s; }
.carousel-sparkles span:nth-child(4) { left: 158px; top: 94px; animation-delay: -2.1s; }
.carousel-sparkles span:nth-child(5) { left: 98px; top: 12px; animation-delay: -2.4s; }

.carousel-notes i {
  position: absolute; font-style: normal; color: var(--color-accent); opacity: 0;
  animation: noteFloat 3.4s ease-in-out infinite;
}
.carousel-notes i:nth-child(1) { left: 38px; top: 80px; animation-delay: 0s; }
.carousel-notes i:nth-child(2) { left: 150px; top: 72px; animation-delay: -0.9s; }
.carousel-notes i:nth-child(3) { left: 92px; top: 18px; animation-delay: -1.8s; }

.carousel-label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.14em; color: var(--color-text-secondary); white-space: nowrap; z-index: 6;
}

/* ==================== 4. 恶魔召唤 ==================== */
.summon-core { position: absolute; inset: 0; overflow: hidden; }
.altar {
  position: absolute; left: 50%; bottom: 18px; width: 120px; height: 18px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  border: 1px solid var(--color-border); animation: altarGlow 3s ease-in-out infinite;
}
.sigil-ring {
  position: absolute; left: 50%; top: 50%; width: 144px; height: 144px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--color-border);
  border-top-color: var(--color-accent); animation: ringSpin 9s linear infinite;
}
.sigil-star {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%);
  animation: ringSpin 6s linear infinite;
}
.sigil-star::before {
  content: ""; position: absolute; inset: 0;
  background: var(--color-accent-soft);
  clip-path: polygon(50% 0%, 61% 30%, 92% 35%, 68% 55%, 76% 88%, 50% 70%, 24% 88%, 32% 55%, 8% 35%, 39% 30%);
}
.sigil-core {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-bg-primary), var(--color-accent-soft) 50%, transparent 70%);
  box-shadow: 0 0 20px var(--color-accent-soft); z-index: 3;
}
.runes {
  position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%);
  border-radius: 50%; animation: spinReverse 12s linear infinite;
}
.runes span {
  position: absolute; left: 50%; top: 50%; color: var(--color-accent); font-size: 11px;
}
.runes span:nth-child(1) { transform: rotate(18deg) translateX(54px); }
.runes span:nth-child(2) { transform: rotate(56deg) translateX(54px); }
.runes span:nth-child(3) { transform: rotate(94deg) translateX(54px); }
.runes span:nth-child(4) { transform: rotate(132deg) translateX(54px); }
.runes span:nth-child(5) { transform: rotate(170deg) translateX(54px); }
.runes span:nth-child(6) { transform: rotate(208deg) translateX(54px); }
.runes span:nth-child(7) { transform: rotate(246deg) translateX(54px); }
.runes span:nth-child(8) { transform: rotate(284deg) translateX(54px); }

.card-swirl {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 114px; transform: translate(-50%, -50%);
  animation: cardFloat 4s ease-in-out infinite;
}
.card-swirl .card {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 36px; margin-left: -13px; margin-top: -18px;
  border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-primary);
  opacity: 0; animation: cardRise 1.9s ease-in-out infinite;
}
.card-swirl .card:nth-child(1) { animation-delay: 0s; transform: rotate(0deg) translate(46px) rotate(0deg); }
.card-swirl .card:nth-child(2) { animation-delay: -0.31s; transform: rotate(60deg) translate(46px) rotate(-60deg); }
.card-swirl .card:nth-child(3) { animation-delay: -0.62s; transform: rotate(120deg) translate(46px) rotate(-120deg); }
.card-swirl .card:nth-child(4) { animation-delay: -0.93s; transform: rotate(180deg) translate(46px) rotate(-180deg); }
.card-swirl .card:nth-child(5) { animation-delay: -1.24s; transform: rotate(240deg) translate(46px) rotate(-240deg); }
.card-swirl .card:nth-child(6) { animation-delay: -1.55s; transform: rotate(300deg) translate(46px) rotate(-300deg); }

.embers span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-accent); opacity: 0; animation: emberRise 2.5s infinite;
}
.embers span:nth-child(1) { left: 45px; animation-delay: 0s; }
.embers span:nth-child(2) { left: 85px; animation-delay: -0.5s; }
.embers span:nth-child(3) { left: 115px; animation-delay: -1s; }
.embers span:nth-child(4) { left: 145px; animation-delay: -1.5s; }
.embers span:nth-child(5) { left: 65px; animation-delay: -2s; }

.loading-label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.12em; color: var(--color-text-secondary); z-index: 6;
}

/* ==================== 5. 星座 ==================== */
.zodiac-box { position: absolute; inset: 0; overflow: hidden; }
.nebula {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  filter: blur(4px); animation: corePulse 3s ease-in-out infinite;
}
.zodiac-ring {
  position: absolute; left: 50%; top: 50%; width: 144px; height: 144px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--color-border); animation: ringSpin 16s linear infinite;
}
.zodiac-glyphs {
  position: absolute; left: 50%; top: 50%; width: 144px; height: 144px; transform: translate(-50%, -50%);
  animation: spinReverse 22s linear infinite;
}
.zodiac-glyphs span {
  position: absolute; left: 50%; top: 50%; color: var(--color-text-secondary); font-size: 10px; opacity: 0.7;
}
.zodiac-glyphs span:nth-child(1) { transform: rotate(0deg) translateY(-64px) rotate(0deg); }
.zodiac-glyphs span:nth-child(2) { transform: rotate(30deg) translateY(-64px) rotate(-30deg); }
.zodiac-glyphs span:nth-child(3) { transform: rotate(60deg) translateY(-64px) rotate(-60deg); }
.zodiac-glyphs span:nth-child(4) { transform: rotate(90deg) translateY(-64px) rotate(-90deg); }
.zodiac-glyphs span:nth-child(5) { transform: rotate(120deg) translateY(-64px) rotate(-120deg); }
.zodiac-glyphs span:nth-child(6) { transform: rotate(150deg) translateY(-64px) rotate(-150deg); }
.zodiac-glyphs span:nth-child(7) { transform: rotate(180deg) translateY(-64px) rotate(-180deg); }
.zodiac-glyphs span:nth-child(8) { transform: rotate(210deg) translateY(-64px) rotate(-210deg); }
.zodiac-glyphs span:nth-child(9) { transform: rotate(240deg) translateY(-64px) rotate(-240deg); }
.zodiac-glyphs span:nth-child(10) { transform: rotate(270deg) translateY(-64px) rotate(-270deg); }
.zodiac-glyphs span:nth-child(11) { transform: rotate(300deg) translateY(-64px) rotate(-300deg); }
.zodiac-glyphs span:nth-child(12) { transform: rotate(330deg) translateY(-64px) rotate(-330deg); }

.card-orbit {
  position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%);
  animation: ringSpin 7s linear infinite;
}
.astro-card {
  position: absolute; left: 50%; top: 8px; width: 18px; height: 26px; margin-left: -9px;
  border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-bg-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); transform-origin: center center;
}
.astro-card::after {
  content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 7px; color: var(--color-accent);
}
.astro-card:nth-child(1) { transform: rotate(0deg) translateY(-54px); }
.astro-card:nth-child(2) { transform: rotate(72deg) translateY(-54px); }
.astro-card:nth-child(3) { transform: rotate(144deg) translateY(-54px); }
.astro-card:nth-child(4) { transform: rotate(216deg) translateY(-54px); }
.astro-card:nth-child(5) { transform: rotate(288deg) translateY(-54px); }

.constellation {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 70px;
  transform: translate(-50%, -50%); opacity: 0.85;
}
.constellation svg { width: 100%; height: 100%; fill: none; }
.constellation svg line { stroke: var(--color-accent-soft); stroke-width: 1.2; stroke-dasharray: 2 3; }
.constellation svg circle { fill: var(--color-accent); filter: drop-shadow(0 0 2px var(--color-accent)); }

.star-core {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--color-bg-primary); box-shadow: 0 0 12px var(--color-accent);
}

.star-dust span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-accent); opacity: 0.6; animation: sparkle 2.2s infinite;
}
.star-dust span:nth-child(1) { left: 45px; top: 35px; animation-delay: 0s; }
.star-dust span:nth-child(2) { left: 145px; top: 40px; animation-delay: -0.4s; }
.star-dust span:nth-child(3) { left: 95px; top: 18px; animation-delay: -0.8s; }
.star-dust span:nth-child(4) { left: 65px; top: 98px; animation-delay: -1.2s; }
.star-dust span:nth-child(5) { left: 125px; top: 92px; animation-delay: -1.6s; }

/* ==================== 6. 翻书 ==================== */
.book { position: absolute; left: 50%; top: 50%; width: 146px; height: 88px; transform: translate(-50%, -50%); perspective: 900px; }
.book-base {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-primary) 50%, var(--color-bg-secondary));
  box-shadow: 0 6px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
  border: 1px solid var(--color-border);
}
.book-base::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--color-border); transform: translateX(-50%);
}
.book .page {
  position: absolute; top: 8px; left: 11px; width: 62px; height: 72px;
  border-radius: 8px 4px 4px 8px; background: var(--color-bg-primary);
  border: 1px solid var(--color-border); transform-origin: right center;
  transform-style: preserve-3d; animation: pageFlip 2.2s cubic-bezier(.45,.02,.2,1) infinite;
}
.book .page::before {
  content: ""; position: absolute; inset: 10px 9px;
  background: repeating-linear-gradient(to bottom, var(--color-text-secondary) 0 1px, transparent 1px 6px);
  opacity: 0.2;
}
.book .page::after {
  content: "✦"; position: absolute; right: 9px; bottom: 8px; font-size: 8px; color: var(--color-accent);
}
.book .page.page-1 { animation-delay: 0s; }
.book .page.page-2 { left: 20px; animation-delay: -0.32s; transform: rotateY(-6deg); }
.book .page.page-3 { left: 30px; animation-delay: -0.64s; transform: rotateY(-12deg); }
.book .page.page-4 { left: 40px; animation-delay: -0.96s; transform: rotateY(-18deg); }
.book .page.page-5 { left: 50px; animation-delay: -1.28s; transform: rotateY(-24deg); }
.book .page.page-6 { left: 60px; animation-delay: -1.60s; transform: rotateY(-30deg); }

.page-edge {
  position: absolute; right: 16px; top: 12px; width: 14px; height: 64px; border-radius: 7px;
  background: linear-gradient(180deg, var(--color-accent-soft), transparent);
  animation: edgeGlow 2.2s ease-in-out infinite;
}
.flip-ray {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 70px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-accent-soft), transparent 68%);
  animation: rayPulse 2.2s ease-in-out infinite;
}
.book-label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.12em; color: var(--color-text-secondary); white-space: nowrap;
}

/* ==================== 7. 记忆瓶 ==================== */
.bottle-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bottle {
  position: relative; width: 112px; height: 96px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.06));
  animation: bottleFloat 3.2s ease-in-out infinite;
}
.bottle::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 28px; height: 16px; transform: translateX(-50%);
  border-radius: 8px 8px 6px 6px; background: linear-gradient(180deg, var(--color-bg-primary), transparent);
  border: 1px solid var(--color-border);
}
.bottle-body {
  position: absolute; left: 50%; top: 11px; width: 92px; height: 80px; transform: translateX(-50%);
  border-radius: 26px 26px 28px 28px; border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent), var(--color-bg-primary);
  box-shadow: inset 0 0 15px rgba(255,255,255,0.2); overflow: hidden;
}
.bottle-body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100%);
  animation: glassShine 3.6s linear infinite;
}
.bottle-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: var(--color-accent-soft); border-top: 1px solid var(--color-border);
  animation: waterWave 2.7s ease-in-out infinite;
}
.bottle .message {
  position: absolute; width: 24px; height: 16px; border-radius: 3px;
  border: 1px solid var(--color-border); background: var(--color-bg-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); opacity: 0;
  animation: floatPaper 3.2s ease-in-out infinite;
}
.bottle .message::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px;
  transform: translate(-50%, -50%); background: var(--color-accent-soft);
  box-shadow: 0 -2px 0 var(--color-accent-soft), 0 2px 0 var(--color-accent-soft);
}
.bottle .message:nth-child(1) { left: 14px; top: 14px; animation-delay: 0s; }
.bottle .message:nth-child(2) { left: 54px; top: 8px; animation-delay: -0.45s; }
.bottle .message:nth-child(3) { left: 96px; top: 20px; animation-delay: -0.9s; }
.bottle .message:nth-child(4) { left: 20px; top: 40px; animation-delay: -1.35s; }
.bottle .message:nth-child(5) { left: 70px; top: 42px; animation-delay: -1.8s; }
.bottle .message:nth-child(6) { left: 110px; top: 38px; animation-delay: -2.25s; }

.message-focus {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), transparent 68%);
  animation: focusPulse 1.3s ease-in-out infinite;
}
.message-sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent); animation: sparkle 1.6s ease-in-out infinite;
}
.message-sparkle:nth-child(8) { left: 45px; top: 18px; animation-delay: 0s; }
.message-sparkle:nth-child(9) { left: 100px; top: 20px; animation-delay: -0.5s; }
.message-sparkle:nth-child(10) { left: 118px; top: 54px; animation-delay: -1s; }
.message-sparkle:nth-child(11) { left: 28px; top: 56px; animation-delay: -1.2s; }

.bottle-label {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 8px; letter-spacing: 0.08em; color: var(--color-text-secondary); white-space: nowrap;
}

/* ==================== 天使/恶魔漂浮文字通用样式 ==================== */
.floating-text-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
.float-txt {
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  animation-name: textRiseFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.float-txt-angel {
  color: var(--color-accent);
  text-shadow: 0 0 6px var(--color-bg-primary), 0 0 10px var(--color-accent-soft);
}
.float-txt-devil {
  color: var(--color-accent);
  text-shadow: 0 0 4px #000, 0 0 8px var(--color-accent);
}

/* ==================== 动画定义（Keyframes） ==================== */
@keyframes textRiseFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.85;
    transform: translateY(-80px) rotate(8deg) scale(1.05);
  }
  100% {
    transform: translateY(-130px) rotate(-10deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes cardFly {
  0% { opacity: 0; transform: translate(-10px, 8px) rotate(-18deg) scale(0.76); }
  12% { opacity: 1; }
  25% { transform: translate(-48px, -12px) rotate(-38deg) scale(0.92); }
  50% { opacity: 1; transform: translate(0px, -30px) rotate(8deg) scale(1); }
  75% { transform: translate(48px, -10px) rotate(36deg) scale(0.92); }
  100% { opacity: 0; transform: translate(12px, 10px) rotate(58deg) scale(0.76); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.46; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.56; }
  50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}
@keyframes featherRise {
  0% { transform: translateY(12px) scale(0.8) rotate(-10deg); opacity: 0; }
  20% { opacity: 0.85; }
  55% { transform: translateY(-15px) scale(1) rotate(5deg); opacity: 1; }
  100% { transform: translateY(-45px) scale(1.06) rotate(15deg); opacity: 0; }
}
@keyframes sparkle {
  0%, 100% { transform: scale(0.55); opacity: 0; }
  32% { opacity: 1; }
  52% { transform: scale(1.18); opacity: 1; }
  78% { opacity: 0.28; }
}
@keyframes noteFloat {
  0% { transform: translateY(10px) scale(0.8); opacity: 0; }
  25% { opacity: 0.78; }
  55% { transform: translateY(-8px) scale(1); opacity: 1; }
  100% { transform: translateY(-26px) scale(1.08); opacity: 0; }
}
@keyframes ponyFloat {
  0%, 100% { filter: brightness(0.98) saturate(0.96); }
  50% { filter: brightness(1.08) saturate(1.08); }
}
@keyframes altarGlow {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.92); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
@keyframes cardRise {
  0% { opacity: 0; transform: translateY(12px) scale(0.8); }
  25% { opacity: 0.9; }
  50% { transform: translateY(-12px) scale(1.04); opacity: 1; }
  100% { transform: translateY(-28px) scale(0.8); opacity: 0; }
}
@keyframes emberRise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
}
@keyframes pageFlip {
  0% { transform: rotateY(0deg) translateX(0); opacity: 0.92; }
  38% { transform: rotateY(-110deg) translateX(6px); opacity: 1; }
  100% { transform: rotateY(-270deg) translateX(0); opacity: 0; }
}
@keyframes edgeGlow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.92; }
}
@keyframes rayPulse {
  0%, 100% { opacity: 0.36; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes waterWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes glassShine {
  0% { transform: translateX(-50px); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(82px); opacity: 0.9; }
  100% { transform: translateX(140px); opacity: 0; }
}
@keyframes focusPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.72; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* ============ 想念箱 Miss Box ============ */

#miss-box-wrap {
  padding: 4px 20px 14px 20px;
}

.miss-box-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.miss-box-card.calm {
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--color-text-tertiary);
}

.miss-box-card.calm .miss-box-star {
  color: rgba(255, 255, 255, 0.18);
}

.miss-box-card.active {
  /* 🟢 使用 color-mix 将主题色混合 18% 透明度作为渐变起点 */
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, rgba(10, 10, 10, 0.45) 100%);
  /* 🟢 边框使用主题色混合 34% 透明度 */
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
  color: var(--color-accent);
  /* 🟢 外阴影和内阴影都动态使用主题色混合 */
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--color-accent) 16%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--color-accent) 4%, transparent);
  cursor: pointer;
}

.miss-box-card.active:active {
  transform: scale(0.985);
}

.miss-box-star {
  flex-shrink: 0;
}

.miss-box-star.pulsing {
  color: var(--color-accent);
  filter: drop-shadow(0 0 6px var(--color-accent));
  animation: starPulse 2.5s infinite ease-in-out;
}

.miss-box-text {
  line-height: 1.6;
}

/* ============ 想念信笺 ============ */

.miss-letters-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 4px;
}

.miss-letter-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px;
}

.miss-letter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
}

.miss-letter-char {
  color: var(--color-accent);
  font-weight: 500;
  letter-spacing: 2px;
}

.miss-letter-time {
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.miss-letter-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text-primary);
  letter-spacing: 1px;
  word-break: break-word;
  font-style: italic;
}

@keyframes starPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}


.miss-letter-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text-primary);
  letter-spacing: 1px;
  word-break: break-word;
  font-style: italic;
}

@keyframes starPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}
/* ==========================================================================
   精致装饰型 - 自适应沉浸式共鸣卡片 (Immersive Mini MusicBar)
   ========================================================================== */

.music-card-immersive {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 220px; /* 精致的 220px 高度，适合做挂件 */
  margin: 10px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 0 0 1px var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
  box-sizing: border-box;
}

/* 顶部悬浮控制栏（鼠标移入时高亮，减少对聊天的打扰） */
.floating-controls {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.music-card-immersive:hover .floating-controls {
  opacity: 1;
}

.stealth-select {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  max-width: 140px;
}
.stealth-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.stealth-play-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.stealth-play-btn:hover {
  transform: scale(1.05);
}
.music-card-immersive.is-playing .stealth-play-btn {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ==========================================================
   强制隔离显示机制：只展示当前选择的风格，完全杜绝堆叠 bug
   ========================================================== */
.style-view {
  display: none !important; /* 强制全部默认隐藏 */
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 34px 12px 12px 12px !important;
  box-sizing: border-box !important;
}

/* 当最外层卡片被标记或包含对应 class 时，激活指定风格视图，其余全部强力隐藏 */
.music-card-immersive.style-polaroid .view-polaroid,
.music-card-immersive.style-sonic .view-sonic,
.music-card-immersive.style-tape .view-tape {
  display: flex !important; /* 激活对应的子视图 */
  flex-direction: column !important;
  justify-content: space-between !important;
  animation: fadeInStyle 0.4s ease-out forwards;
}

@keyframes fadeInStyle {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* 无缝隐形输入框 */
.stealth-input {
  background: transparent;
  border: none;
  text-align: center;
  color: var(--color-text-secondary);
  width: 100%;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}
.stealth-input:focus {
  color: var(--color-text-primary);
}

/* 底部微小统计 */
.music-mini-footer {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 9px;
  color: var(--color-text-tertiary);
  opacity: 0.6;
  z-index: 10;
  pointer-events: none;
}

/* ==========================================
   一、 风格 1：拍立得 (Polaroid) 样式
   ========================================== */
.view-polaroid {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent) 4%, var(--color-bg-secondary)) 0%, var(--color-bg-secondary) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.polaroid-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  position: relative;
  z-index: 6;
}

.mini-polaroid {
  width: 76px;
  background: #ffffff;
  padding: 5px 5px 12px 5px;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: rotate(var(--rotate-deg));
  transition: transform 0.3s ease;
  box-sizing: border-box;
}
.polaroid-left { --rotate-deg: -5deg; }
.polaroid-right { --rotate-deg: 5deg; }

/* 播放时拍立得摇摆动效 */
.music-card-immersive.is-playing .polaroid-left {
  animation: polaroidSwingLeft 4s ease-in-out infinite alternate;
}
.music-card-immersive.is-playing .polaroid-right {
  animation: polaroidSwingRight 4s ease-in-out infinite alternate;
}
@keyframes polaroidSwingLeft {
  0% { transform: rotate(-5deg) translateY(0); }
  100% { transform: rotate(-2deg) translateY(-2px); }
}
@keyframes polaroidSwingRight {
  0% { transform: rotate(5deg) translateY(0); }
  100% { transform: rotate(2deg) translateY(-2px); }
}

.polaroid-photo {
  width: 100%;
  height: 66px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--color-bg-tertiary);
}
.polaroid-photo img,
.polaroid-photo .avatar,
.polaroid-photo > svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}

.polaroid-label {
  font-size: 8px;
  color: #555;
  text-align: center;
  margin-top: 4px;
  font-family: 'PingFang SC', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 命运红线 SVG */
.red-thread-svg {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 5;
}
.path-thread {
  fill: none;
  stroke: #ff4757;
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(255, 71, 87, 0.5));
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.music-card-immersive.is-playing .path-thread {
  animation: drawThread 3s ease-out, redPulse 2s infinite alternate;
}
@keyframes drawThread {
  from { stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}
@keyframes redPulse {
  0% { filter: drop-shadow(0 0 1px rgba(255, 71, 87, 0.3)); stroke: #ff4757; }
  100% { filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.9)); stroke: #ff6b81; }
}

.polaroid-inputs {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 6;
}
.polaroid-input-sig {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.polaroid-input-dist {
  font-size: 9px;
  color: var(--color-text-tertiary);
}

/* ==========================================
   二、 风格 2：灵魂共鸣 (Sonic)
   ========================================== */
.view-sonic {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-secondary)) 0%, var(--color-bg-secondary) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sonic-ambient-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.music-card-immersive.is-playing .sonic-ambient-glow {
  opacity: 1;
}

.sonic-player-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  position: relative;
  z-index: 5;
}

.mini-vinyl {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin 8s linear infinite;
  animation-play-state: paused;
  border: 1px solid rgba(255,255,255,0.05);
  box-sizing: border-box;
}
.music-card-immersive.is-playing .vinyl-record {
  animation-play-state: running;
}
.vinyl-record::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 30deg, rgba(255,255,255,0.06) 60deg, transparent 90deg, transparent 210deg, rgba(255,255,255,0.06) 240deg, transparent 270deg);
}
.vinyl-cover {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #000;
  background: var(--color-bg-tertiary);
}
.vinyl-cover img,
.vinyl-cover .avatar,
.vinyl-cover > svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* 音波桥接线 */
.sonic-connection {
  width: 80px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sonic-glow-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.5;
}
.sonic-visualizer {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 100%;
  z-index: 2;
}
.s-bar {
  width: 3px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 3px;
  box-shadow: 0 0 5px var(--color-accent);
  transition: height 0.15s;
}
.music-card-immersive.is-playing .s-bar {
  animation: sEqualize 0.5s ease-in-out infinite alternate;
}
.s-bar:nth-child(1) { animation-delay: 0.1s; }
.s-bar:nth-child(2) { animation-delay: 0.3s; }
.s-bar:nth-child(3) { animation-delay: 0.0s; }
.s-bar:nth-child(4) { animation-delay: 0.4s; }
.s-bar:nth-child(5) { animation-delay: 0.2s; }
.s-bar:nth-child(6) { animation-delay: 0.5s; }
.s-bar:nth-child(7) { animation-delay: 0.15s; }
@keyframes sEqualize {
  0% { transform: scaleY(1); height: 3px; }
  100% { transform: scaleY(5); height: 5px; }
}

.sonic-lcd-display {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sonic-input-sig {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.sonic-input-dist {
  font-size: 9px;
  color: var(--color-text-tertiary);
}

/* ==========================================
   三、 风格 3：狂热磁带 (Tape)
   ========================================== */
.view-tape {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-text-secondary) 3%, var(--color-bg-secondary)) 0%, var(--color-bg-secondary) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.mini-tape-body {
  width: 210px;
  height: 110px;
  background: linear-gradient(180deg, #d8d8d8, #afafaf);
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2), inset 0 1px 2px white;
  padding: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  box-sizing: border-box;
}
.tape-sticker {
  flex: 1;
  background: #ffffff;
  border-radius: 4px;
  border-top: 5px solid var(--color-accent);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
  box-sizing: border-box;
}

.tape-input-sig {
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  color: #111 !important;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 1px;
}

.tape-spindles {
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: center;
  background: #151515;
  border-radius: 12px;
  height: 40px;
  margin: 3px 0;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.8);
}
.spindle-gear {
  width: 28px;
  height: 28px;
  background: #f0f0f0;
  border-radius: 50%;
  border: 2px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.spindle-gear::after {
  content: ''; position: absolute; inset: 0; border: 3px dashed #444; border-radius: 50%;
  animation: spin 5s linear infinite; animation-play-state: paused;
}
.music-card-immersive.is-playing .spindle-gear::after, 
.music-card-immersive.is-playing .gear-avatar {
  animation-play-state: running;
}
.gear-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  animation: spin 5s linear infinite;
  animation-play-state: paused;
  background: var(--color-bg-tertiary);
}
.gear-avatar img,
.gear-avatar .avatar,
.gear-avatar > svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
}

.tape-led-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.led-col {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
}
.led-dot {
  width: 5px;
  height: 3px;
  background: #ddd;
  border-radius: 1px;
}
.music-card-immersive.is-playing .led-col:nth-child(1) .led-dot { background: #0be881; animation: flashLed 0.4s infinite alternate; }
.music-card-immersive.is-playing .led-col:nth-child(2) .led-dot { background: #ffdd59; animation: flashLed 0.3s infinite alternate 0.1s; }
.music-card-immersive.is-playing .led-col:nth-child(3) .led-dot { background: #ff3f34; animation: flashLed 0.2s infinite alternate 0.2s; }
@keyframes flashLed { 0% { opacity: 0.2; } 100% { opacity: 1; } }

.tape-input-dist {
  margin-bottom: 5px;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ==========================================
   四5. 粒子音符飘浮机制
   ========================================== */
.particles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
.particle {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  color: var(--color-accent);
  opacity: 0;
}
.music-card-immersive.is-playing .particle {
  animation: floatUpParticle 3s linear infinite;
}
.p1 { left: 15%; animation-delay: 0s; }
.p2 { left: 35%; animation-delay: 1.5s; font-size: 9px; }
.p3 { left: 65%; animation-delay: 0.8s; }
.p4 { left: 85%; animation-delay: 2.2s; font-size: 10px; }

@keyframes floatUpParticle {
  0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-150px) scale(1.2) rotate(180deg); opacity: 0; }
}


/* ==========================================================================
   四、 漂流瓶 (Drift) 与 教程 (Tutorial) 特有样式与动效
   ========================================================================== */

/* --- 漂流瓶主页面容器 --- */
.drift-container {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-bottom: 40px;
}

/* 优化后的呼吸霓虹背景 (完美适配浅色/深色主题) */
.drift-bg-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: var(--color-bg-primary);
  overflow: hidden;
  pointer-events: none;
}
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.08;
  mix-blend-mode: screen;
}
.orb-1 {
  top: 15%; left: -10%;
  width: 320px; height: 320px;
  background: var(--color-accent);
  animation: driftGlowOrb 14s ease-in-out infinite alternate;
}
.orb-2 {
  bottom: 20%; right: -10%;
  width: 300px; height: 300px;
  background: var(--color-text-secondary);
  animation: driftGlowOrb 18s ease-in-out infinite alternate-reverse;
}
.orb-3 {
  top: 45%; left: 25%;
  width: 220px; height: 220px;
  background: var(--color-accent);
  animation: driftGlowOrb 16s ease-in-out infinite alternate 1.5s;
}
@keyframes driftGlowOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25px, -30px) scale(1.15); }
}

/* 顶栏 */
.drift-top-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
}
.drift-title {
  font-size: 16px;
  letter-spacing: 4px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.drift-btn-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, color 0.2s, background 0.2s;
}
.drift-btn-circle:active {
  transform: scale(0.93);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* 选项卡导航 */
.drift-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  margin: 10px 16px 15px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.drift-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-secondary);
  font-size: 11px;
  letter-spacing: 1px;
  transition: color 0.2s, background 0.2s, transform 0.1s;
}
.drift-tab-item svg {
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}
.drift-tab-item:active { transform: scale(0.97); }
.drift-tab-item.active {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-accent);
}
.drift-tab-item.active svg {
  opacity: 1;
  transform: translateY(-1px);
}

/* 未读回信小提示栏 */
.unread-alert-bar {
  position: relative;
  z-index: 5;
  margin: 0 16px 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  padding: 8px 0;
  text-align: center;
}
.unread-alert-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 1px;
}
.pulse-star {
  color: var(--color-accent);
  animation: pulseStarGlow 2s infinite alternate;
  display: inline-flex;
}
@keyframes pulseStarGlow {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* 磨砂玻璃主卡片 */
.drift-view-content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.drift-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px var(--color-shadow);
  transition: opacity 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

/* --- 状态 1: 极光星海漂流视图 --- */
.state-waiting {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.state-waiting.hide {
  display: none;
}
.action-top {
  margin-top: 30px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hint-text {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
}
.btn-open-envelope {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  border: none;
  padding: 10px 22px;
  border-radius: 99px;
  font-size: 13px;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--color-shadow);
  transition: transform 0.2s, background 0.2s;
}
.btn-open-envelope:active {
  transform: scale(0.95);
}

/* 海洋动画区域 */
.sea-animation-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 65%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* 孤独漂浮的漂流瓶 */
.floating-bottle {
  position: absolute;
  top: 15%;
  color: var(--color-accent);
  animation: floatBottleInSea 4s ease-in-out infinite;
  z-index: 5;
  filter: drop-shadow(0 0 10px var(--color-accent));
}
@keyframes floatBottleInSea {
  0% { transform: translateY(0px) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
  100% { transform: translateY(0px) rotate(-8deg); }
}

/* 海洋波浪容器及流动动效 */
.drift-sea-container {
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 110px;
  overflow: hidden;
}
.drift-waves {
  position: absolute;
  bottom: 0; width: 100%; height: 100%;
}
.wave-use {
  animation: waveMove 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.wave1 { fill: var(--color-accent); opacity: 0.12; animation-delay: -2s; animation-duration: 7s; }
.wave2 { fill: var(--color-accent); opacity: 0.18; animation-delay: -3s; animation-duration: 10s; }
.wave3 { fill: var(--color-text-secondary); opacity: 0.08; animation-delay: -4s; animation-duration: 13s; }
.wave4 { fill: var(--color-accent); opacity: 0.25; animation-delay: -5s; animation-duration: 18s; }

@keyframes waveMove {
  0% { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* 星海升腾的星光 */
.sea-stars {
  position: absolute; inset: 0; pointer-events: none;
}
.sea-star {
  position: absolute;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0.4;
  animation: seaStarTwinkle 3s ease-in-out infinite alternate;
}
@keyframes seaStarTwinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 0.8; transform: scale(1.2); }
}

/* --- 状态 2: 信封 3D 展开与书写视图 --- */
.state-writing {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.state-writing.active {
  pointer-events: auto;
  opacity: 1;
}

/* 信封 3D 折叠结构 (整体放大) */
.envelope-3d {
  position: relative;
  width: 300px; height: 180px;
  perspective: 1000px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.env-body {
  position: absolute; inset: 0;
  background: rgba(128, 128, 128, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px; z-index: 2;
}
.env-flap {
  position: absolute; top: 0; left: 0; width: 100%; height: 95px;
  background: rgba(128, 128, 128, 0.06);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
  border-bottom: 1px solid var(--color-border);
}
/* 隐藏在信封内部的信纸初始状态 */
.env-paper {
  position: absolute; bottom: 10px; left: 10px; right: 10px; height: 160px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px; z-index: 1;
  display: flex; flex-direction: column; padding: 16px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.6s ease, bottom 0.6s ease;
  opacity: 0;
}

/* 信封展开后的激活状态 (信封下沉，信纸高高升起并变长) */
.envelope-3d.open {
  transform: translateY(120px); /* 邮箱底座沉底 */
}
.envelope-3d.open .env-flap {
  transform: rotateX(180deg);
  z-index: 0;
}
.envelope-3d.open .env-paper {
  opacity: 1;
  bottom: 20px;
  height: 380px; /* 大幅增加写信信纸高度 */
  transform: translateY(-170px); /* 向上抽出更多空间 */
  box-shadow: 0 -10px 24px var(--color-shadow);
  z-index: 4;
}

/* 写信纸张内部的排版适配 */
.drift-select-char {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.drift-textarea {
  flex: 1; /* 自动撑满信纸的剩余高度，提供超大书写空间 */
  background: transparent;
  border: 1px dashed var(--color-border);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.5px;
  padding: 12px;
  margin-bottom: 14px;
  resize: none;
}
.letter-actions { 
  display: flex; 
  gap: 10px; 
  margin-top: auto; 
}
.letter-actions .btn { 
  flex: 1; 
  min-height: 38px;
}

/* 投递星光粒子动画 */
.drift-anim-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(circle at center, rgba(13, 9, 26, 0.96) 0%, rgba(3, 2, 6, 0.98) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.drift-anim-overlay.show { opacity: 1; pointer-events: auto; }
.drift-anim-bottle {
  color: var(--color-accent);
  filter: drop-shadow(0 0 15px var(--color-accent));
  animation: floatDriftBottle 3s ease-in-out infinite;
}
.drift-anim-bottle svg { width: 68px; height: 68px; }
.drift-anim-text {
  margin-top: 40px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
  animation: breathText 1.5s ease-in-out infinite alternate;
}
.drift-particles-container {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.drift-particle {
  position: absolute; bottom: -20px;
  background: #fff; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 6px var(--color-accent);
  animation: floatDriftParticle 3s linear infinite;
}

@keyframes floatDriftBottle {
  0% { transform: translateY(20px) rotate(-10deg) scale(0.9); }
  50% { transform: translateY(-30px) rotate(15deg) scale(1.1); }
  100% { transform: translateY(-100px) rotate(-5deg) scale(0); opacity: 0; }
}
@keyframes breathText { 0% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes floatDriftParticle {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-100vh) scale(1.2); opacity: 0; }
}

/* --- 仪式感打捞特效 --- */
.salvage-anim-vortex {
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.salvage-swirl {
  position: absolute;
  width: 100%; height: 100%;
  border: 1px dashed var(--color-accent);
  border-radius: 50%; opacity: 0.3;
  animation: salvageSwirlRotate 3s linear infinite;
}
.salvage-swirl::before {
  content: ''; position: absolute; inset: 15px;
  border: 1px dashed var(--color-text-secondary);
  border-radius: 50%; opacity: 0.5;
  animation: salvageSwirlRotate 2s linear infinite reverse;
}
.salvage-bottle-rise {
  color: var(--color-accent);
  filter: drop-shadow(0 0 10px var(--color-accent));
  animation: bottleRiseUp 3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.salvage-bottle-rise svg { width: 56px; height: 56px; }

@keyframes salvageSwirlRotate {
  0% { transform: rotate(0deg) scale(0.85); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(0.85); }
}
@keyframes bottleRiseUp {
  0% { transform: translateY(80px) rotate(-30deg) scale(0.5); opacity: 0; }
  50% { transform: translateY(-10px) rotate(15deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(-30px) rotate(0deg) scale(1); opacity: 1; }
}

/* --- 收件箱与大邮箱筒 --- */
.salvage-trigger-zone {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.salvage-trigger-box {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.salvage-info { display: flex; flex-direction: column; gap: 4px; }
.salvage-title { font-size: 13px; letter-spacing: 2px; font-weight: 500; color: var(--color-text-primary); }
.salvage-sub { font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 1px; }
.btn-salvage { padding: 6px 12px; min-height: 34px; font-size: 12px; border-radius: var(--radius-md); }

.mailbox-large-icon {
  position: relative;
  color: var(--color-text-secondary);
  opacity: 0.45;
  display: inline-flex;
  margin-bottom: 12px;
}
.mailbox-glowing-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  background: var(--color-text-secondary);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.06;
  pointer-events: none;
}

.drift-mailbox-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 5px 0 30px;
}
.drift-mailbox-list::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 16px; width: 1px;
  background: linear-gradient(to bottom, var(--color-border) 0%, rgba(255,255,255,0.01) 100%);
}

.drift-timeline-item {
  position: relative;
  display: flex;
  padding-left: 40px;
  animation: driftFadeInUp 0.4s ease forwards;
}
.drift-timeline-badge {
  position: absolute; left: 6px; top: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary);
  z-index: 2;
}
.item-sent .drift-timeline-badge { border-color: var(--color-accent); color: var(--color-accent); }

.drift-timeline-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.drift-timeline-card:active { background: rgba(255, 255, 255, 0.04); }
.drift-timeline-card.received-bubble { border-left: 2px solid var(--color-text-secondary); }
.drift-timeline-card.received-bubble:has(.drift-unread-dot) {
  border-left: 2px solid var(--color-accent); background: rgba(255, 255, 255, 0.02);
}

.drift-letter-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 8px; opacity: 0.7; }
.drift-letter-sender { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.drift-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 6px var(--color-accent); }
.drift-letter-time { color: var(--color-text-tertiary); }
.drift-letter-body-container { min-height: 24px; }
.drift-letter-text { font-size: 13px; line-height: 1.6; letter-spacing: 1px; color: var(--color-text-primary); word-break: break-all; }
.tap-to-read { display: block; text-align: center; font-size: 11px; letter-spacing: 2px; color: var(--color-accent); padding: 6px 0; animation: pulseStarGlow 2.5s infinite alternate; }

.drift-letter-actions { display: flex; justify-content: flex-end; margin-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.03); padding-top: 8px; }
.drift-text-btn-danger { background: transparent; border: none; color: rgba(220, 38, 38, 0.6); font-size: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; transition: color 0.2s; }
.drift-text-btn-danger:active { color: rgba(220, 38, 38, 1); }

.salvaged-sheet-body { padding: 16px 8px; min-height: 120px; }
.salvaged-typewriter-text { font-size: 14px; line-height: 1.8; letter-spacing: 1.5px; color: var(--color-text-primary); word-break: break-all; }

/* 打字机光标 */
.typing-active::after {
  content: ''; display: inline-block; width: 1px; height: 1.2em;
  background: var(--color-accent); animation: blinkCursor 0.8s infinite;
  margin-left: 3px; vertical-align: -0.15em;
}
@keyframes blinkCursor { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes driftFadeInUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }

/* --- 长段字卡 --- */
.long-cards-card { padding: 18px; }
.long-cards-header { margin-bottom: 14px; }
.long-cards-title { font-size: 14px; letter-spacing: 2px; font-weight: 500; margin-bottom: 4px; }
.long-cards-desc { font-size: 11px; line-height: 1.5; color: var(--color-text-secondary); }
.long-cards-import-zone { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.long-import-input { min-height: 80px; font-size: 12px; background: rgba(255, 255, 255, 0.01); border-color: var(--color-border); }
.long-list-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); padding-bottom: 6px; margin-bottom: 10px; }
.long-cards-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 300px; }
.long-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.01); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.long-item-content { flex: 1; font-size: 12px; line-height: 1.5; word-break: break-all; color: var(--color-text-primary); }
.long-item-del { background: transparent; border: none; color: var(--color-text-secondary); opacity: 0.5; padding: 2px; transition: opacity 0.2s; }
.long-item-del:active { opacity: 1; color: #dc2626; }




/* ==================== 5. 花瓣抽签 ==================== */
.petal-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.petal-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 130px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(236, 72, 153, 0.28), transparent 70%);
  filter: blur(2px);
  animation: petalGlow 2.8s ease-in-out infinite;
}

.petal-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 65%, rgba(251, 207, 232, 0.12), transparent 45%),
    radial-gradient(circle at 30% 45%, rgba(251, 207, 232, 0.08), transparent 30%),
    radial-gradient(circle at 70% 40%, rgba(251, 207, 232, 0.08), transparent 30%);
  opacity: 0.8;
}

.petal-deck {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 80px;
  height: 52px;
  transform: translateX(-50%);
}

.petal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transform-origin: center bottom;
}

.petal-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 1px solid rgba(236, 72, 153, 0.16);
}

.petal-card::after {
  content: "✿";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.85;
}

.petal-card.deck-a { animation: petalDeckA 2.6s ease-in-out infinite; }
.petal-card.deck-b { animation: petalDeckB 2.6s ease-in-out infinite; }
.petal-card.deck-c { animation: petalDeckC 2.6s ease-in-out infinite; }

.petal-card.chosen-card {
  left: 50%;
  top: 53%;
  background: linear-gradient(180deg, #fff1f6, #f9a8d4);
  border-color: rgba(236, 72, 153, 0.55);
  animation: petalChosen 2.6s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 4;
}

.petal-burst span {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 100% 0 100% 0;
  background: #fbcfe8;
  opacity: 0;
}

.petal-burst span:nth-child(1) { animation: petalFly1 2.6s infinite; }
.petal-burst span:nth-child(2) { animation: petalFly2 2.6s infinite; animation-delay: .15s; }
.petal-burst span:nth-child(3) { animation: petalFly3 2.6s infinite; animation-delay: .28s; }
.petal-burst span:nth-child(4) { animation: petalFly4 2.6s infinite; animation-delay: .08s; }
.petal-burst span:nth-child(5) { animation: petalFly5 2.6s infinite; animation-delay: .22s; }
.petal-burst span:nth-child(6) { animation: petalFly6 2.6s infinite; animation-delay: .35s; }

.petal-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes petalGlow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes petalDeckA {
  0%, 100% { transform: translate(-16px, 0) rotate(-12deg); opacity: .42; }
  50% { transform: translate(-20px, -4px) rotate(-18deg); opacity: .6; }
}
@keyframes petalDeckB {
  0%, 100% { transform: translate(0, -2px) rotate(5deg); opacity: .34; }
  50% { transform: translate(2px, -6px) rotate(8deg); opacity: .5; }
}
@keyframes petalDeckC {
  0%, 100% { transform: translate(16px, 2px) rotate(14deg); opacity: .38; }
  50% { transform: translate(20px, -2px) rotate(18deg); opacity: .55; }
}
@keyframes petalChosen {
  0%, 16% { transform: translate(-50%, 35px) scale(0.62) rotate(180deg); opacity: 0; }
  38%, 74% { transform: translate(-50%, -10px) scale(1.08) rotate(0deg); opacity: 1; box-shadow: 0 0 22px rgba(236,72,153,.35); }
  100% { transform: translate(-50%, -34px) scale(1) rotate(0deg); opacity: 0; }
}
@keyframes petalFly1 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(-38px, -56px) rotate(180deg); opacity: 0; } }
@keyframes petalFly2 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(42px, -48px) rotate(220deg); opacity: 0; } }
@keyframes petalFly3 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(-16px, -78px) rotate(90deg); opacity: 0; } }
@keyframes petalFly4 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(22px, -72px) rotate(140deg); opacity: 0; } }
@keyframes petalFly5 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(-50px, -36px) rotate(260deg); opacity: 0; } }
@keyframes petalFly6 { 0% { transform: translate(0, 10px) rotate(0); opacity: 1; } 100% { transform: translate(54px, -58px) rotate(300deg); opacity: 0; } }
/* ==================== 6. 圣光天使 ==================== */
.holy-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.holy-pillar {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 74px;
  height: 150px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,253,230,.72), rgba(255,253,230,.12) 72%, transparent);
  filter: blur(8px);
  animation: holyPillar 2.8s ease-in-out infinite;
}

.holy-halo {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 74px;
  height: 74px;
  transform: translateX(-50%) rotateX(70deg);
  border-radius: 50%;
  border: 2px solid rgba(255,245,180,.8);
  box-shadow: 0 0 16px rgba(255,245,180,.55), inset 0 0 8px rgba(255,245,180,.4);
  animation: holyHalo 2.8s ease-in-out infinite;
}

.holy-rays {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,255,255,.22) 20deg,
      transparent 35deg,
      rgba(255,244,188,.22) 55deg,
      transparent 70deg,
      rgba(255,255,255,.2) 90deg,
      transparent 120deg,
      rgba(255,244,188,.18) 145deg,
      transparent 180deg,
      rgba(255,255,255,.18) 210deg,
      transparent 240deg,
      rgba(255,244,188,.18) 280deg,
      transparent 360deg);
  border-radius: 50%;
  filter: blur(2px);
  opacity: .7;
  animation: holyRays 3.2s linear infinite;
}

.holy-deck {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 84px;
  height: 54px;
  transform: translateX(-50%);
}

.holy-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.holy-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
  opacity: .9;
}

.holy-card.deck-a { animation: holyDeckA 2.8s ease-in-out infinite; }
.holy-card.deck-b { animation: holyDeckB 2.8s ease-in-out infinite; }
.holy-card.deck-c { animation: holyDeckC 2.8s ease-in-out infinite; }

.holy-card.chosen-card {
  left: 50%;
  top: 56%;
  background: linear-gradient(180deg, #fffbe6, #facc15);
  border-color: rgba(250, 204, 21, .7);
  animation: holyAscend 2.8s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 4;
}

.holy-sparkles span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,245,180,.9);
  opacity: 0;
}

.holy-sparkles span:nth-child(1) { animation: holySpark 2.8s infinite .1s; }
.holy-sparkles span:nth-child(2) { animation: holySpark 2.8s infinite .4s; }
.holy-sparkles span:nth-child(3) { animation: holySpark 2.8s infinite .7s; }
.holy-sparkles span:nth-child(4) { animation: holySpark 2.8s infinite 1s; }
.holy-sparkles span:nth-child(5) { animation: holySpark 2.8s infinite 1.3s; }

.holy-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes holyPillar {
  0%, 100% { opacity: .45; transform: translateX(-50%) scaleX(.98); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.08); }
}
@keyframes holyHalo {
  0%, 100% { transform: translateX(-50%) rotateX(70deg) translateY(0); }
  50% { transform: translateX(-50%) rotateX(70deg) translateY(-8px) scale(1.08); }
}
@keyframes holyRays {
  0% { transform: translateX(-50%) rotate(0deg); opacity: .55; }
  100% { transform: translateX(-50%) rotate(360deg); opacity: .75; }
}
@keyframes holyDeckA {
  0%, 100% { transform: translate(-18px, 2px) rotate(-12deg); opacity: .4; }
  50% { transform: translate(-22px, -2px) rotate(-18deg); opacity: .56; }
}
@keyframes holyDeckB {
  0%, 100% { transform: translate(0, -2px) rotate(4deg); opacity: .34; }
  50% { transform: translate(2px, -6px) rotate(8deg); opacity: .5; }
}
@keyframes holyDeckC {
  0%, 100% { transform: translate(18px, 2px) rotate(14deg); opacity: .38; }
  50% { transform: translate(22px, -2px) rotate(18deg); opacity: .54; }
}
@keyframes holyAscend {
  0%, 15% { transform: translate(-50%, 36px) scale(.62); opacity: 0; }
  40%, 74% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; box-shadow: 0 0 24px rgba(250,204,21,.45); }
  100% { transform: translate(-50%, -36px) scale(1); opacity: 0; }
}
@keyframes holySpark {
  0% { transform: translate(0, 18px) scale(.8); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(0, -42px) scale(1.4); opacity: 0; }
}
/* ==================== 7. 月相塔罗 ==================== */
.moon-tarot-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.moon-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(196,181,253,.18), transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(96,165,250,.08), transparent 50%);
}

.moon-ring {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 102px;
  height: 102px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(196,181,253,.22);
  box-shadow: 0 0 14px rgba(196,181,253,.16);
}

.moon-phase {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 132px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  color: var(--color-accent);
  font-size: 12px;
  opacity: .85;
}

.phase {
  animation: moonPhase 3s ease-in-out infinite;
}

.tarot-fan {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 120px;
  height: 70px;
  transform: translateX(-50%);
}

.tarot-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 28px;
  height: 42px;
  margin-left: -14px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform-origin: center bottom;
}

.tarot-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.fan-1 { animation: tarotFan1 3s ease-in-out infinite; }
.fan-2 { animation: tarotFan2 3s ease-in-out infinite; }
.fan-3 { animation: tarotFan3 3s ease-in-out infinite; z-index: 4; border-color: rgba(196,181,253,.5); }
.fan-4 { animation: tarotFan4 3s ease-in-out infinite; }
.fan-5 { animation: tarotFan5 3s ease-in-out infinite; }

.tarot-moon {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 36px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.95) 0 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 55%, transparent 56%);
  box-shadow: 0 0 18px rgba(255,255,255,.22);
  animation: moonPulse 3s ease-in-out infinite;
}

.tarot-chosen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 44px;
  margin-left: -15px;
  margin-top: -22px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f8faff, #c4b5fd);
  border: 1px solid rgba(196,181,253,.7);
  box-shadow: 0 0 24px rgba(196,181,253,.28);
  animation: tarotChosen 3s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 5;
}

.tarot-chosen::after {
  content: "☾";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #6d28d9;
  font-size: 12px;
}

.moon-tarot-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes moonPulse {
  0%, 100% { transform: translateX(-50%) scale(.96); opacity: .72; }
  50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}
@keyframes moonPhase {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes tarotFan1 {
  0%, 18% { transform: translateX(0) rotate(0deg); opacity: 0; }
  45%, 80% { transform: translateX(-54px) rotate(-34deg); opacity: .62; }
  100% { transform: translateX(0) rotate(0deg); opacity: 0; }
}
@keyframes tarotFan2 {
  0%, 18% { transform: translateX(0) rotate(0deg); opacity: 0; }
  45%, 80% { transform: translateX(-28px) rotate(-16deg); opacity: .8; }
  100% { transform: translateX(0) rotate(0deg); opacity: 0; }
}
@keyframes tarotFan3 {
  0%, 18% { transform: translateX(0) scale(1); opacity: 0; }
  45%, 80% { transform: translateX(0) translateY(-24px) scale(1.16); opacity: 1; box-shadow: 0 0 20px rgba(196,181,253,.35); }
  100% { transform: translateX(0) scale(1); opacity: 0; }
}
@keyframes tarotFan4 {
  0%, 18% { transform: translateX(0) rotate(0deg); opacity: 0; }
  45%, 80% { transform: translateX(28px) rotate(16deg); opacity: .8; }
  100% { transform: translateX(0) rotate(0deg); opacity: 0; }
}
@keyframes tarotFan5 {
  0%, 18% { transform: translateX(0) rotate(0deg); opacity: 0; }
  45%, 80% { transform: translateX(54px) rotate(34deg); opacity: .62; }
  100% { transform: translateX(0) rotate(0deg); opacity: 0; }
}
@keyframes tarotChosen {
  0%, 16% { transform: translate(-50%, 32px) scale(.62); opacity: 0; }
  40%, 76% { transform: translate(-50%, -12px) scale(1.16); opacity: 1; }
  100% { transform: translate(-50%, -34px) scale(1); opacity: 0; }
}
/* ==================== 8. 海浪飘牌 ==================== */
.ocean-wave-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ocean-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,21,37,1) 0%, rgba(8,47,73,1) 100%);
}

.ocean-wave {
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: 42%;
  background: rgba(56,189,248,.18);
  filter: blur(1px);
  animation: oceanSpin 4s linear infinite;
}

.wave-b {
  background: rgba(14,165,233,.22);
  border-radius: 46%;
  animation-duration: 3.2s;
  animation-direction: reverse;
}

.wave-c {
  background: rgba(125,211,252,.12);
  border-radius: 44%;
  animation-duration: 5s;
}

.ocean-deck {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 88px;
  height: 54px;
  transform: translateX(-50%);
}

.ocean-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(11,38,63,.95), rgba(7,89,133,.8));
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.ocean-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: #bae6fd;
}

.ocean-card.deck-a { animation: oceanDeckA 3s ease-in-out infinite; }
.ocean-card.deck-b { animation: oceanDeckB 3s ease-in-out infinite; }
.ocean-card.deck-c { animation: oceanDeckC 3s ease-in-out infinite; }

.ocean-card.chosen-card {
  left: 50%;
  top: 55%;
  background: linear-gradient(180deg, #e0f2fe, #38bdf8);
  border-color: rgba(56,189,248,.7);
  animation: oceanRise 3s ease-in-out infinite;
  z-index: 4;
}

.bubble-trail span {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #bae6fd;
  opacity: 0;
}

.bubble-trail span:nth-child(1) { animation: bubbleRise 3s infinite .15s; }
.bubble-trail span:nth-child(2) { animation: bubbleRise 3s infinite .4s; }
.bubble-trail span:nth-child(3) { animation: bubbleRise 3s infinite .65s; }
.bubble-trail span:nth-child(4) { animation: bubbleRise 3s infinite .9s; }
.bubble-trail span:nth-child(5) { animation: bubbleRise 3s infinite 1.15s; }

.ocean-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #38bdf8;
}

@keyframes oceanSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes oceanDeckA {
  0%, 100% { transform: translate(-18px, 2px) rotate(-16deg); opacity: .34; }
  50% { transform: translate(-22px, -2px) rotate(-20deg); opacity: .5; }
}
@keyframes oceanDeckB {
  0%, 100% { transform: translate(0, -2px) rotate(6deg); opacity: .28; }
  50% { transform: translate(0, -6px) rotate(9deg); opacity: .42; }
}
@keyframes oceanDeckC {
  0%, 100% { transform: translate(18px, 2px) rotate(16deg); opacity: .34; }
  50% { transform: translate(22px, -2px) rotate(20deg); opacity: .5; }
}
@keyframes oceanRise {
  0%, 18% { transform: translate(-50%, 34px) scale(.64) rotate(-5deg); opacity: 0; }
  44%, 78% { transform: translate(-50%, -10px) scale(1.08) rotate(2deg); opacity: 1; box-shadow: 0 10px 18px rgba(2,132,199,.45); }
  100% { transform: translate(-50%, -34px) scale(1) rotate(5deg); opacity: 0; }
}
@keyframes bubbleRise {
  0% { transform: translateY(0) scale(.9); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-62px) scale(1.6); opacity: 0; }
}
/* ==================== 9. 数据骇入 ==================== */
.cyber-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cyber-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.28;
}

.cyber-scanline {
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent), 0 0 18px var(--color-accent);
  animation: cyberScan 2.8s linear infinite;
}

.cyber-noise {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 20%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.05), transparent 18%),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.04), transparent 16%);
  opacity: 0.45;
  animation: cyberNoise 1.6s steps(2, end) infinite;
}

.cyber-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.cyber-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.85;
}

.cyber-card-left {
  transform: translate(-42px, -2px) rotate(-10deg);
  opacity: 0.35;
  animation: cyberIdleLeft 2.8s ease-in-out infinite;
}

.cyber-card-right {
  transform: translate(14px, 0) rotate(8deg);
  opacity: 0.35;
  animation: cyberIdleRight 2.8s ease-in-out infinite;
}

.cyber-card-center {
  transform: translate(-14px, -4px);
  border-color: var(--color-accent);
  animation: cyberDecrypt 2.8s ease-in-out infinite;
}

.cyber-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes cyberScan {
  0% { top: -10px; opacity: 0; }
  10% { opacity: 1; }
  90% { top: 138px; opacity: 1; }
  100% { top: 148px; opacity: 0; }
}

@keyframes cyberNoise {
  0%, 100% { opacity: 0.3; filter: contrast(1); }
  50% { opacity: 0.6; filter: contrast(1.2); }
}

@keyframes cyberIdleLeft {
  0%, 100% { transform: translate(-42px, -2px) rotate(-10deg); opacity: 0.28; }
  50% { transform: translate(-46px, -6px) rotate(-14deg); opacity: 0.45; }
}

@keyframes cyberIdleRight {
  0%, 100% { transform: translate(14px, 0) rotate(8deg); opacity: 0.28; }
  50% { transform: translate(18px, -4px) rotate(12deg); opacity: 0.45; }
}

@keyframes cyberDecrypt {
  0%, 28% {
    transform: translate(-14px, -4px) scale(0.92);
    opacity: 0.35;
    filter: saturate(0.8);
    box-shadow: none;
  }
  50%, 78% {
    transform: translate(-14px, -10px) scale(1.14);
    opacity: 1;
    filter: saturate(1.15);
    box-shadow: 0 0 18px var(--color-accent);
  }
  100% {
    transform: translate(-14px, -4px) scale(0.92);
    opacity: 0.35;
    filter: saturate(0.8);
    box-shadow: none;
  }
}
/* ==================== 10. 机械齿轮 ==================== */
.gear-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gear-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px dashed var(--color-border);
  box-sizing: border-box;
}

.gear-ring::before {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0.45;
}

.gear-ring-1 {
  left: -18px;
  bottom: -18px;
  width: 98px;
  height: 98px;
  animation: gearSpin 4s linear infinite;
}

.gear-ring-2 {
  right: 16px;
  bottom: -8px;
  width: 64px;
  height: 64px;
  border-color: var(--color-accent);
  animation: gearSpinReverse 2.2s linear infinite;
}

.gear-ring-3 {
  left: 50%;
  top: 18px;
  width: 92px;
  height: 92px;
  transform: translateX(-50%);
  opacity: 0.5;
  animation: gearSpin 6s linear infinite;
}

.gear-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.gear-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.gear-card.deck-card {
  opacity: 0.34;
}

.deck-a {
  transform: translate(-18px, 10px) rotate(-14deg);
  animation: gearDeckA 3.2s ease-in-out infinite;
}

.deck-b {
  transform: translate(0, 4px) rotate(4deg);
  animation: gearDeckB 3.2s ease-in-out infinite;
}

.deck-c {
  transform: translate(18px, 10px) rotate(14deg);
  animation: gearDeckC 3.2s ease-in-out infinite;
}

.chosen-card {
  border-color: var(--color-accent);
  animation: gearLift 3.2s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 3;
}

.gear-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 2px;
  margin-left: -29px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform-origin: center center;
  opacity: 0.55;
}

.gear-hand-1 {
  animation: gearHandA 3.2s ease-in-out infinite;
}

.gear-hand-2 {
  animation: gearHandB 3.2s ease-in-out infinite;
}

.gear-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes gearSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes gearSpinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes gearDeckA {
  0%, 100% { transform: translate(-18px, 10px) rotate(-14deg); opacity: 0.28; }
  50% { transform: translate(-22px, 6px) rotate(-18deg); opacity: 0.45; }
}

@keyframes gearDeckB {
  0%, 100% { transform: translate(0, 4px) rotate(4deg); opacity: 0.24; }
  50% { transform: translate(0, 0) rotate(7deg); opacity: 0.38; }
}

@keyframes gearDeckC {
  0%, 100% { transform: translate(18px, 10px) rotate(14deg); opacity: 0.28; }
  50% { transform: translate(22px, 6px) rotate(18deg); opacity: 0.45; }
}

@keyframes gearLift {
  0%, 18% {
    transform: translate(-50%, 34px) scale(0.64);
    opacity: 0;
  }
  42%, 78% {
    transform: translate(-50%, -10px) scale(1.08);
    opacity: 1;
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
  }
  100% {
    transform: translate(-50%, -34px) scale(1);
    opacity: 0;
  }
}

@keyframes gearHandA {
  0%, 100% { transform: translateY(-14px) rotate(18deg); opacity: 0.25; }
  50% { transform: translateY(-14px) rotate(-12deg); opacity: 0.55; }
}

@keyframes gearHandB {
  0%, 100% { transform: translateY(14px) rotate(-18deg); opacity: 0.25; }
  50% { transform: translateY(14px) rotate(12deg); opacity: 0.55; }
}
/* ==================== 11. 时空漩涡 ==================== */
.vortex-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 420px;
}

.vortex-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.05), transparent 22%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,0.03), transparent 36%);
}

.vortex-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 14px var(--color-accent), inset 0 0 14px var(--color-accent);
  opacity: 0.32;
}

.vortex-ring-1 {
  width: 138px;
  height: 138px;
  margin-left: -69px;
  margin-top: -69px;
  transform: rotateX(68deg) rotateY(14deg);
  animation: vortexSpin 3.2s linear infinite;
}

.vortex-ring-2 {
  width: 104px;
  height: 104px;
  margin-left: -52px;
  margin-top: -52px;
  transform: rotateX(60deg) rotateY(-14deg);
  animation: vortexSpinReverse 4.2s linear infinite;
}

.vortex-ring-3 {
  width: 74px;
  height: 74px;
  margin-left: -37px;
  margin-top: -37px;
  transform: rotateX(72deg) rotateY(8deg);
  animation: vortexSpin 2.2s linear infinite;
}

.vortex-slice {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,255,255,0.08) 18deg,
    transparent 38deg,
    rgba(255,255,255,0.05) 58deg,
    transparent 78deg,
    rgba(255,255,255,0.08) 108deg,
    transparent 140deg,
    rgba(255,255,255,0.05) 170deg,
    transparent 360deg
  );
  filter: blur(2px);
  opacity: 0.5;
}

.vortex-slice-1 { animation: vortexSpin 5s linear infinite; }
.vortex-slice-2 { animation: vortexSpinReverse 4s linear infinite; width: 92px; height: 92px; margin-left: -46px; margin-top: -46px; }
.vortex-slice-3 { animation: vortexSpin 3.2s linear infinite; width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; }

.vortex-deck {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 86px;
  height: 54px;
  transform: translateX(-50%);
}

.vortex-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.vortex-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.vortex-card.deck-a { animation: vortexDeckA 3.4s ease-in-out infinite; opacity: 0.35; }
.vortex-card.deck-b { animation: vortexDeckB 3.4s ease-in-out infinite; opacity: 0.3; }
.vortex-card.deck-c { animation: vortexDeckC 3.4s ease-in-out infinite; opacity: 0.35; }

.vortex-card.chosen-card {
  border-color: var(--color-accent);
  animation: vortexChosen 3.4s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 4;
}

.vortex-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes vortexSpin {
  0% { transform: rotateX(68deg) rotateY(14deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(14deg) rotateZ(360deg); }
}

@keyframes vortexSpinReverse {
  0% { transform: rotateX(60deg) rotateY(-14deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateY(-14deg) rotateZ(-360deg); }
}

@keyframes vortexDeckA {
  0%, 100% { transform: translate(-18px, 8px) rotate(-12deg); opacity: 0.22; }
  50% { transform: translate(-22px, 2px) rotate(-18deg); opacity: 0.38; }
}

@keyframes vortexDeckB {
  0%, 100% { transform: translate(0, 2px) rotate(4deg); opacity: 0.2; }
  50% { transform: translate(0, -2px) rotate(7deg); opacity: 0.34; }
}

@keyframes vortexDeckC {
  0%, 100% { transform: translate(18px, 8px) rotate(12deg); opacity: 0.22; }
  50% { transform: translate(22px, 2px) rotate(18deg); opacity: 0.38; }
}

@keyframes vortexChosen {
  0%, 16% {
    transform: translate(-50%, 38px) scale(0.18) rotate(180deg);
    opacity: 0;
    filter: blur(4px);
  }
  42%, 76% {
    transform: translate(-50%, -12px) scale(1.16) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 0 22px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -34px) scale(1.34) rotate(-18deg);
    opacity: 0;
    filter: blur(3px);
  }
}
/* ==================== 12. 水晶预言 ==================== */
.crystal-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.crystal-orb {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--color-bg-primary), var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  box-shadow:
    inset 0 0 20px var(--color-accent),
    0 0 28px rgba(0,0,0,0.18);
  overflow: hidden;
}

.crystal-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 62%);
  opacity: 0.28;
  animation: orbPulse 3s ease-in-out infinite;
}

.crystal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.72), transparent 70%);
  box-shadow: 0 0 16px var(--color-accent);
  animation: corePulse 3s ease-in-out infinite;
}

.crystal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
}

.crystal-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.95;
}

.crystal-card.chosen-card {
  animation: crystalManifest 3s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 4;
}

.crystal-sparkles span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  opacity: 0;
}

.crystal-sparkles span:nth-child(1) { animation: sparkleRise 3s infinite .1s; }
.crystal-sparkles span:nth-child(2) { animation: sparkleRise 3s infinite .4s; }
.crystal-sparkles span:nth-child(3) { animation: sparkleRise 3s infinite .7s; }
.crystal-sparkles span:nth-child(4) { animation: sparkleRise 3s infinite 1s; }
.crystal-sparkles span:nth-child(5) { animation: sparkleRise 3s infinite 1.3s; }

.crystal-base {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 100px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
  opacity: 0.26;
  filter: blur(2px);
}

.crystal-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes orbPulse {
  0%, 100% { transform: scale(0.94); opacity: 0.22; }
  50% { transform: scale(1.08); opacity: 0.48; }
}

@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.65; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

@keyframes crystalManifest {
  0%, 18% {
    transform: translate(-50%, 22px) scale(0.28);
    opacity: 0;
    filter: blur(4px);
  }
  42%, 78% {
    transform: translate(-50%, -2px) scale(1.06);
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 0 18px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -22px) scale(1.18);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes sparkleRise {
  0% { transform: translate(0, 18px) scale(0.8); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(0, -44px) scale(1.4); opacity: 0; }
}
/* ==================== 13. 灵摆寻迹 ==================== */
.pendulum-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pendulum-aura {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 128px;
  height: 82px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent), transparent 68%);
  opacity: 0.14;
  filter: blur(3px);
  animation: pendulumAura 3.5s ease-in-out infinite;
}

.pendulum-orbit {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 112px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  opacity: 0.65;
}

.pendulum-string {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 2px;
  height: 86px;
  transform-origin: top center;
  background: linear-gradient(180deg, var(--color-border), var(--color-accent));
  animation: pendulumSwing 3.5s ease-in-out infinite;
  z-index: 5;
}

.pendulum-bob {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 14px;
  height: 20px;
  transform: translateX(-50%);
  background: var(--color-accent);
  clip-path: polygon(50% 0%, 100% 42%, 50% 100%, 0% 42%);
  box-shadow: 0 0 12px var(--color-accent);
}

.pendulum-deck {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 92px;
  height: 52px;
  transform: translateX(-50%);
}

.pendulum-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.pendulum-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.pendulum-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.85;
}

.pendulum-deck-left {
  transform: translate(-22px, 4px) rotate(-18deg);
  opacity: 0.34;
  animation: pendulumDeckLeft 3.5s ease-in-out infinite;
}

.pendulum-deck-right {
  transform: translate(22px, 4px) rotate(18deg);
  opacity: 0.34;
  animation: pendulumDeckRight 3.5s ease-in-out infinite;
}

.pendulum-deck-mid {
  transform: translate(0, 0) rotate(4deg);
  opacity: 0.28;
  animation: pendulumDeckMid 3.5s ease-in-out infinite;
}

.pendulum-chosen-card {
  left: 50%;
  top: 55%;
  border-color: var(--color-accent);
  animation: pendulumChosen 3.5s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 4;
}

.pendulum-sparks span {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  opacity: 0;
}

.pendulum-sparks span:nth-child(1) { animation: pendulumSparkA 3.5s infinite .3s; }
.pendulum-sparks span:nth-child(2) { animation: pendulumSparkB 3.5s infinite .55s; }
.pendulum-sparks span:nth-child(3) { animation: pendulumSparkC 3.5s infinite .8s; }
.pendulum-sparks span:nth-child(4) { animation: pendulumSparkD 3.5s infinite 1.05s; }

.pendulum-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes pendulumAura {
  0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 0.22; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes pendulumSwing {
  0% { transform: rotate(42deg); }
  15% { transform: rotate(-34deg); }
  30% { transform: rotate(20deg); }
  45% { transform: rotate(-10deg); }
  60%, 82% { transform: rotate(0deg); }
  100% { transform: rotate(42deg); }
}

@keyframes pendulumDeckLeft {
  0%, 100% { transform: translate(-22px, 4px) rotate(-18deg); opacity: 0.26; }
  55% { transform: translate(-26px, 0) rotate(-22deg); opacity: 0.42; }
}

@keyframes pendulumDeckRight {
  0%, 100% { transform: translate(22px, 4px) rotate(18deg); opacity: 0.26; }
  55% { transform: translate(26px, 0) rotate(22deg); opacity: 0.42; }
}

@keyframes pendulumDeckMid {
  0%, 100% { transform: translate(0, 0) rotate(4deg); opacity: 0.22; }
  55% { transform: translate(0, -5px) rotate(0deg); opacity: 0.36; }
}

@keyframes pendulumChosen {
  0%, 48% {
    transform: translate(-50%, 30px) scale(0.72);
    opacity: 0;
  }
  64%, 84% {
    transform: translate(-50%, -12px) scale(1.12);
    opacity: 1;
    box-shadow: 0 0 20px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -36px) scale(1.24);
    opacity: 0;
  }
}

@keyframes pendulumSparkA {
  0% { transform: translate(0, 4px) scale(.7); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translate(-38px, -38px) scale(1.2); opacity: 0; }
}

@keyframes pendulumSparkB {
  0% { transform: translate(0, 4px) scale(.7); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translate(34px, -32px) scale(1.2); opacity: 0; }
}

@keyframes pendulumSparkC {
  0% { transform: translate(0, 4px) scale(.7); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translate(-14px, -52px) scale(1.2); opacity: 0; }
}

@keyframes pendulumSparkD {
  0% { transform: translate(0, 4px) scale(.7); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translate(20px, -54px) scale(1.2); opacity: 0; }
}
/* ==================== 14. 炼金魔药 ==================== */
.alchemy-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.alchemy-glow {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 116px;
  height: 76px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent), transparent 68%);
  opacity: 0.18;
  filter: blur(3px);
  animation: alchemyGlow 3s ease-in-out infinite;
}

.alchemy-flask {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}

.alchemy-neck {
  width: 16px;
  height: 18px;
  border-left: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  background: rgba(255,255,255,0.03);
  border-radius: 3px 3px 0 0;
}

.alchemy-body {
  position: relative;
  width: 54px;
  height: 50px;
  margin-top: -1px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent),
    var(--color-bg-secondary);
  overflow: hidden;
  box-shadow: inset 0 0 16px rgba(255,255,255,0.04);
}

.alchemy-liquid {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -4px;
  height: 34px;
  border-radius: 45% 45% 0 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.24), transparent 30%),
    var(--color-accent);
  opacity: 0.42;
  animation: alchemyLiquid 3s ease-in-out infinite;
}

.alchemy-card {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.alchemy-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.alchemy-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.alchemy-chosen-card {
  animation: alchemyCardFloat 3s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 3;
}

.alchemy-bubbles span {
  position: absolute;
  left: 50%;
  bottom: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  opacity: 0;
  z-index: 5;
}

.alchemy-bubbles span:nth-child(1) {
  width: 5px; height: 5px; margin-left: -18px;
  animation: alchemyBubble 3s infinite .15s;
}

.alchemy-bubbles span:nth-child(2) {
  width: 7px; height: 7px; margin-left: -6px;
  animation: alchemyBubble 3s infinite .38s;
}

.alchemy-bubbles span:nth-child(3) {
  width: 4px; height: 4px; margin-left: 12px;
  animation: alchemyBubble 3s infinite .65s;
}

.alchemy-bubbles span:nth-child(4) {
  width: 6px; height: 6px; margin-left: 22px;
  animation: alchemyBubble 3s infinite .9s;
}

.alchemy-bubbles span:nth-child(5) {
  width: 4px; height: 4px; margin-left: -26px;
  animation: alchemyBubble 3s infinite 1.12s;
}

.alchemy-runes span {
  position: absolute;
  color: var(--color-accent);
  font-size: 11px;
  opacity: 0;
}

.alchemy-runes span:nth-child(1) {
  left: 38%;
  top: 34%;
  animation: alchemyRune 3s infinite .2s;
}

.alchemy-runes span:nth-child(2) {
  left: 58%;
  top: 30%;
  animation: alchemyRune 3s infinite .55s;
}

.alchemy-runes span:nth-child(3) {
  left: 50%;
  top: 22%;
  animation: alchemyRune 3s infinite .9s;
}

.alchemy-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes alchemyGlow {
  0%, 100% { opacity: 0.12; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 0.28; transform: translateX(-50%) scale(1.08); }
}

@keyframes alchemyLiquid {
  0%, 100% { transform: translateX(-4px) rotate(-4deg); }
  50% { transform: translateX(4px) rotate(4deg); }
}

@keyframes alchemyCardFloat {
  0%, 18% {
    transform: translate(-50%, 34px) scale(0.28);
    opacity: 0;
    filter: blur(5px);
  }
  44%, 76% {
    transform: translate(-50%, -16px) scale(1.08);
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 0 20px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -40px) scale(1.2);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes alchemyBubble {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  25% { opacity: .85; }
  100% { transform: translateY(-74px) scale(1.5); opacity: 0; }
}

@keyframes alchemyRune {
  0%, 20% { transform: translateY(18px) scale(.8); opacity: 0; }
  48%, 70% { transform: translateY(0) scale(1); opacity: .85; }
  100% { transform: translateY(-18px) scale(1.15); opacity: 0; }
}
/* ==================== 15. 浮光提灯 ==================== */
.lantern-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lantern-halo {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 112px;
  height: 86px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
  opacity: 0.16;
  filter: blur(4px);
  animation: lanternHalo 3.5s ease-in-out infinite;
}

.lantern {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}

.lantern-handle {
  width: 18px;
  height: 16px;
  margin-bottom: -4px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

.lantern-top {
  width: 30px;
  height: 8px;
  border-radius: 14px 14px 2px 2px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  z-index: 2;
}

.lantern-glass {
  position: relative;
  width: 36px;
  height: 40px;
  border-left: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent),
    rgba(255,255,255,0.02);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
  overflow: hidden;
}

.lantern-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom, var(--color-accent), transparent 76%);
  opacity: 0.38;
}

.lantern-base {
  width: 42px;
  height: 7px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.lantern-flame {
  position: relative;
  width: 12px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-accent);
  box-shadow: 0 0 14px var(--color-accent), 0 0 26px var(--color-accent);
  animation: lanternFlame 1.6s ease-in-out infinite;
  z-index: 2;
}

.lantern-card {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.lantern-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.lantern-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.lantern-chosen-card {
  animation: lanternCardFloat 3.5s cubic-bezier(.2,.85,.2,1) infinite;
  z-index: 3;
}

.lantern-motes span {
  position: absolute;
  left: 50%;
  bottom: 46px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  opacity: 0;
  z-index: 5;
}

.lantern-motes span:nth-child(1) { animation: lanternMoteA 3.5s infinite .2s; }
.lantern-motes span:nth-child(2) { animation: lanternMoteB 3.5s infinite .45s; }
.lantern-motes span:nth-child(3) { animation: lanternMoteC 3.5s infinite .7s; }
.lantern-motes span:nth-child(4) { animation: lanternMoteD 3.5s infinite .95s; }
.lantern-motes span:nth-child(5) { animation: lanternMoteE 3.5s infinite 1.2s; }

.lantern-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes lanternHalo {
  0%, 100% { opacity: 0.1; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 0.24; transform: translateX(-50%) scale(1.1); }
}

@keyframes lanternFlame {
  0%, 100% { transform: rotate(-45deg) scale(.9); opacity: .8; }
  50% { transform: rotate(-45deg) scale(1.14); opacity: 1; }
}

@keyframes lanternCardFloat {
  0%, 16% {
    transform: translate(-50%, 34px) scale(.34);
    opacity: 0;
    filter: blur(3px);
  }
  42%, 76% {
    transform: translate(-50%, -20px) scale(1.08);
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 0 22px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -44px) scale(1.18);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes lanternMoteA {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  32% { opacity: .9; }
  100% { transform: translate(-34px, -58px) scale(1.2); opacity: 0; }
}

@keyframes lanternMoteB {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  32% { opacity: .9; }
  100% { transform: translate(28px, -50px) scale(1.2); opacity: 0; }
}

@keyframes lanternMoteC {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  32% { opacity: .9; }
  100% { transform: translate(-8px, -70px) scale(1.2); opacity: 0; }
}

@keyframes lanternMoteD {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  32% { opacity: .9; }
  100% { transform: translate(12px, -66px) scale(1.2); opacity: 0; }
}

@keyframes lanternMoteE {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  32% { opacity: .9; }
  100% { transform: translate(38px, -36px) scale(1.2); opacity: 0; }
}
/* ==================== 16. 玻璃信封 ==================== */
.envelope-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.envelope-glow {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 100px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
  opacity: 0.18;
  filter: blur(4px);
  animation: envelopeGlow 3.5s ease-in-out infinite;
}

.envelope-body {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 86px;
  height: 52px;
  margin-left: -43px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  border-top: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), transparent),
    linear-gradient(180deg, var(--color-bg-secondary), var(--color-bg-primary));
  backdrop-filter: blur(4px);
  z-index: 4;
  overflow: hidden;
}

.envelope-body::before,
.envelope-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 62px;
  height: 62px;
  border-top: 1px solid var(--color-border);
}

.envelope-body::before {
  left: -30px;
  transform: rotate(36deg);
}

.envelope-body::after {
  right: -30px;
  transform: rotate(-36deg);
}

.envelope-flap {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent),
    var(--color-bg-tertiary);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: rotate(45deg) scaleY(0.68);
  transform-origin: center bottom;
  opacity: 0.86;
  z-index: 5;
  animation: envelopeFlap 3.5s ease-in-out infinite;
}

.envelope-card {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 28px;
  height: 40px;
  margin-left: -14px;
  margin-top: -20px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-tertiary));
  border: 1px solid var(--color-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  z-index: 3;
}

.envelope-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

.envelope-card::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 11px;
  color: var(--color-accent);
}

.envelope-chosen-card {
  animation: envelopeCardSlide 3.5s cubic-bezier(.2,.85,.2,1) infinite;
}

.envelope-line {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--color-border);
  opacity: 0.7;
}

.envelope-line-a {
  top: 24px;
}

.envelope-line-b {
  top: 32px;
  opacity: 0.45;
}

.envelope-sparkles span {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  opacity: 0;
  z-index: 6;
}

.envelope-sparkles span:nth-child(1) { animation: envelopeSparkA 3.5s infinite .25s; }
.envelope-sparkles span:nth-child(2) { animation: envelopeSparkB 3.5s infinite .55s; }
.envelope-sparkles span:nth-child(3) { animation: envelopeSparkC 3.5s infinite .85s; }
.envelope-sparkles span:nth-child(4) { animation: envelopeSparkD 3.5s infinite 1.15s; }

.envelope-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

@keyframes envelopeGlow {
  0%, 100% { opacity: 0.12; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 0.3; transform: translateX(-50%) scale(1.1); }
}

@keyframes envelopeFlap {
  0%, 24% {
    transform: rotate(45deg) scaleY(0.68);
  }
  42%, 78% {
    transform: translateY(-8px) rotate(45deg) scaleY(0.46);
  }
  100% {
    transform: rotate(45deg) scaleY(0.68);
  }
}

@keyframes envelopeCardSlide {
  0%, 18% {
    transform: translate(-50%, 36px) scale(0.72);
    opacity: 0;
  }
  44%, 76% {
    transform: translate(-50%, -26px) scale(1.08);
    opacity: 1;
    box-shadow: 0 0 20px var(--color-accent);
  }
  100% {
    transform: translate(-50%, -48px) scale(1.18);
    opacity: 0;
  }
}

@keyframes envelopeSparkA {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translate(-34px, -42px) scale(1.2); opacity: 0; }
}

@keyframes envelopeSparkB {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translate(32px, -38px) scale(1.2); opacity: 0; }
}

@keyframes envelopeSparkC {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translate(-10px, -58px) scale(1.2); opacity: 0; }
}

@keyframes envelopeSparkD {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translate(16px, -54px) scale(1.2); opacity: 0; }
}
.center-typing-card.shuffling-style-petal,
.center-typing-card.shuffling-style-holy,
.center-typing-card.shuffling-style-moon-tarot,
.center-typing-card.shuffling-style-ocean-wave,
.center-typing-card.shuffling-style-cyber,
.center-typing-card.shuffling-style-gear,
.center-typing-card.shuffling-style-vortex,
.center-typing-card.shuffling-style-crystal,
.center-typing-card.shuffling-style-pendulum,
.center-typing-card.shuffling-style-alchemy,
.center-typing-card.shuffling-style-lantern,
.center-typing-card.shuffling-style-envelope {
  min-height: 258px;
  width: 258px;
}



/* ============ 全局虚拟通话系统 ============ */
#global-call-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

#global-call-overlay.global-call-active {
  opacity: 1 !important;
}

#global-call-overlay.global-call-full {
  pointer-events: auto !important;
}

#global-call-overlay.global-call-player,
#global-call-overlay.global-call-ball {
  pointer-events: none !important;
}

#global-call-overlay.global-call-player .global-call-floating,
#global-call-overlay.global-call-ball .global-call-floating {
  pointer-events: auto !important;
}

/* ============ [核心隔离保障] 确保小形态下不出现全屏大版，全屏下不出现小版 ============ */
#global-call-overlay.global-call-player .global-call-container,
#global-call-overlay.global-call-ball .global-call-container,
#global-call-overlay[class*="skin-"].global-call-player .global-call-container,
#global-call-overlay[class*="skin-"].global-call-ball .global-call-container {
  display: none !important;
}

#global-call-overlay.global-call-full .global-call-floating,
#global-call-overlay[class*="skin-"].global-call-full .global-call-floating {
  display: none !important;
}

/* ============ 强力隔离全局头像样式污染 ============ */
#global-call-overlay .avatar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  box-shadow: none !important;
  background: var(--color-bg-tertiary) !important;
  color: var(--color-text-primary) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#global-call-overlay .avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}

#global-call-overlay .avatar-fallback {
  font-family: inherit !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* ============ 全屏通话态 ============ */
.global-call-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-primary) !important;
  pointer-events: auto !important;
  background: var(--color-bg-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.global-call-bg {
  position: absolute !important;
  inset: -20% !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(80px) brightness(0.4) saturate(1.3) !important;
  transform: scale(1.2) !important;
  opacity: 0.65 !important;
}

.global-call-mask {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.6) 70%,
    rgba(0, 0, 0, 0.85) 100%) !important;
}

/* 左上角缩小按钮 */
.global-call-minimize-btn {
  position: absolute !important;
  top: calc(28px + env(safe-area-inset-top, 0px)) !important;
  left: 28px !important;
  z-index: 20 !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 50% !important;
  color: var(--color-text-primary) !important;
  background: var(--glass-bg, var(--color-bg-secondary)) !important;
  backdrop-filter: blur(var(--glass-blur, 10px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) !important;
  box-shadow: 0 4px 12px var(--color-shadow) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s, background 0.2s !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.global-call-minimize-btn:hover {
  background: var(--color-bg-tertiary) !important;
  transform: scale(1.05) !important;
}
.global-call-minimize-btn:active {
  transform: scale(0.94) !important;
}
.global-call-minimize-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* ---- 漂浮文字粒子 ---- */
#particle-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.float-char {
  position: absolute !important;
  left: var(--fc-x) !important;
  top: var(--fc-y) !important;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "KaiTi", serif !important;
  font-size: var(--fc-size) !important;
  font-weight: 300 !important;
  color: var(--color-text-primary) !important;
  text-shadow: 
    0 0 8px var(--color-accent),
    0 0 16px rgba(255, 255, 255, 0.4) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  will-change: transform, opacity !important;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.8) rotate(var(--fc-r));
  animation: floatCharUp var(--fc-dur) cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

@keyframes floatCharUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7) rotate(var(--fc-r));
  }
  15% {
    opacity: var(--fc-alpha);
  }
  80% {
    opacity: var(--fc-alpha);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fc-drift), var(--fc-rise), 0) scale(1.15) rotate(calc(var(--fc-r) + var(--fc-rr)));
  }
}

/* 中央通话信息 */
.global-call-content {
  position: relative !important;
  z-index: 4 !important;
  flex: 1 !important;
  width: 100% !important;
  padding: 80px 24px calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.global-call-info-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
}

.global-call-avatar-wrapper {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 32px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.global-call-avatar-wrapper::before,
.global-call-avatar-wrapper::after {
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  border-radius: 50% !important;
  border: 1px solid var(--color-border) !important;
  animation: globalCallOrbitPulse 4s ease-out infinite !important;
  pointer-events: none !important;
}
.global-call-avatar-wrapper::after {
  inset: -34px !important;
  animation-delay: 2s !important;
}

@keyframes globalCallOrbitPulse {
  0% { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.35); }
}

.global-call-avatar-wrapper .avatar-inner {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 36px var(--color-shadow) !important;
}

.global-call-avatar-wrapper .avatar-inner .avatar {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  display: block !important;
}

.global-call-name {
  margin: 0 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-primary) !important;
}

.global-call-status {
  margin: 12px 0 0 !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  letter-spacing: 0.15em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  display: inline-block !important;
  animation: statusBlink 2s ease-in-out infinite !important;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.global-call-time {
  margin-top: 18px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

/* ============ 底部控制区 ============ */
.global-call-actions {
  position: absolute !important;
  z-index: 10 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.call-action-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 40px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: auto !important;
}

.call-action-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  flex-shrink: 0 !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#global-call-overlay .call-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 50% !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-bg-secondary) !important;
  box-shadow: 0 6px 16px var(--color-shadow) !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: transform 0.2s, background 0.2s !important;
}

#global-call-overlay .call-btn::before,
#global-call-overlay .call-btn::after {
  content: none !important;
  display: none !important;
}

#global-call-overlay .call-btn:hover {
  background: var(--color-bg-tertiary) !important;
  transform: scale(1.06) !important;
}
#global-call-overlay .call-btn:active {
  transform: scale(0.93) !important;
}

#global-call-overlay .call-btn svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
  transform: none !important;
  position: static !important;
  color: currentColor !important;
  vertical-align: middle !important;
}

.call-btn.btn-accept {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}
.call-btn.btn-accept:hover {
  background: #059669 !important;
}
.call-btn.btn-decline,
.call-btn.btn-hangup {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3) !important;
}
.call-btn.btn-decline:hover,
.call-btn.btn-hangup:hover {
  background: #dc2626 !important;
}

.call-btn.btn-utility {
  background: var(--color-bg-secondary) !important;
}

.call-action-label {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}

/* ============ 音乐播放器悬浮窗 ============ */
#global-call-overlay .call-player-widget {
  position: fixed !important;
  top: 40px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  min-height: 140px !important;
  padding: 16px !important;
  border-radius: var(--radius-lg, 22px) !important;
  color: var(--color-text-primary) !important;
  box-sizing: border-box !important;
  z-index: 9999999 !important;
  background: var(--glass-bg, var(--color-bg-secondary)) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 16px 48px var(--color-shadow), 0 4px 12px var(--color-shadow) !important;
  backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  transform: none !important;
}

#global-call-overlay .call-player-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#global-call-overlay .call-player-drag-handle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#global-call-overlay .call-player-drag-handle:active {
  cursor: grabbing !important;
}

/* 头像隔离 */
#global-call-overlay .call-player-cover {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: var(--radius-sm, 8px) !important;
  overflow: hidden !important;
  background: var(--color-bg-tertiary) !important;
  flex-shrink: 0 !important;
  display: block !important;
  position: relative !important;
}

#global-call-overlay .call-player-cover .avatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
}

#global-call-overlay .call-player-cover .avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 播放器文字 */
#global-call-overlay .call-player-meta {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding-right: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#global-call-overlay .call-player-meta * {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

#global-call-overlay .call-player-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 16px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--color-bg-tertiary) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#global-call-overlay .call-player-live-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 5px #10b981 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

#global-call-overlay .call-player-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--color-text-primary) !important;
  width: 100% !important;
}

#global-call-overlay .call-player-subtitle {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* 缩小按钮 */
#global-call-overlay .call-player-mini-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--color-bg-tertiary) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-secondary) !important;
  transition: background 0.2s !important;
  padding: 0 !important;
  z-index: 5 !important;
}
#global-call-overlay .call-player-mini-btn:hover {
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
}
#global-call-overlay .call-player-mini-btn span {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: -5px 0 0 currentColor, 5px 0 0 currentColor !important;
  display: block !important;
}

/* 音频进度条 */
#global-call-overlay .call-player-progress-bar {
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#global-call-overlay .call-player-time {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
}

#global-call-overlay .call-player-track {
  flex: 1 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2.5px !important;
  overflow: hidden !important;
}

#global-call-overlay .call-player-bar {
  flex: 1 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--color-border) !important;
  display: block !important;
  transition: height 0.1s ease !important;
}

#global-call-overlay .call-player-bar.is-active {
  background: var(--color-accent) !important;
}

#global-call-overlay .call-player-live-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0 !important;
}

#global-call-overlay .call-player-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* EQ 音频跳动 */
#global-call-overlay .call-player-eq {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2.5px !important;
  height: 16px !important;
  width: 20px !important;
}
#global-call-overlay .call-player-eq span {
  display: block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background-color: var(--color-accent) !important;
  opacity: 0.4 !important;
  transition: height 0.1s ease !important;
  box-sizing: border-box !important;
}
#global-call-overlay .call-player-eq.playing span {
  animation: eqBounce 0.8s ease-in-out infinite alternate !important;
  opacity: 1 !important;
}
#global-call-overlay .call-player-eq.playing span:nth-child(1) { animation-delay: -0.2s !important; animation-duration: 0.7s !important; }
#global-call-overlay .call-player-eq.playing span:nth-child(2) { animation-delay: -0.5s !important; animation-duration: 0.9s !important; }
#global-call-overlay .call-player-eq.playing span:nth-child(3) { animation-delay: -0.1s !important; animation-duration: 0.6s !important; }
#global-call-overlay .call-player-eq.playing span:nth-child(4) { animation-delay: -0.4s !important; animation-duration: 0.8s !important; }

@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 16px; }
}

#global-call-overlay .call-player-hint {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
}

/* ============ 悬浮球 ============ */
#global-call-overlay .call-ball-widget {
  position: fixed !important;
  top: 40px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: 50% !important;
  cursor: grab !important;
  z-index: 9999999 !important;
  background: var(--glass-bg, var(--color-bg-secondary)) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 12px 32px var(--color-shadow) !important;
  backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overflow: visible !important;
  transform: none !important;
  aspect-ratio: 1 / 1 !important;
}
#global-call-overlay .call-ball-widget:active {
  cursor: grabbing !important;
}

#global-call-overlay .call-ball-avatar {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
}

#global-call-overlay .call-ball-avatar .avatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  display: flex !important;
  overflow: hidden !important;
}

#global-call-overlay .call-ball-avatar .avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

#global-call-overlay .call-ball-ring {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--color-accent) !important;
  animation: ballPulse 2.5s ease-out infinite !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  opacity: 0.5 !important;
}
@keyframes ballPulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

#global-call-overlay .call-ball-status-dot {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 2px solid var(--color-bg-primary) !important;
  box-shadow: 0 0 6px #10b981 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   六、 通灵仪式 (Commune) 与写信冲动特有样式 (完美适配 theme.css 规范)
   ========================================================================== */

/* 通灵撰写中 timeline 卡片 */
.drift-timeline-item.item-impulse {
  opacity: 0.85;
}

.drift-timeline-card.impulse-card {
  border: 1px dashed var(--color-accent) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, color-mix(in srgb, var(--color-accent) 5%, transparent) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 15%, transparent);
  animation: impulsePulse 3s infinite ease-in-out;
}

@keyframes impulsePulse {
  0%, 100% { 
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 15%, transparent); 
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent) !important; 
  }
  50% { 
    box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 35%, transparent); 
    border-color: var(--color-accent) !important; 
  }
}

.item-impulse .drift-timeline-badge {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  border-color: var(--color-accent) !important;
}

.impulse-writing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-top: 8px;
}

.impulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
  animation: impulseDotPulse 1.2s infinite alternate;
}
.impulse-dot:nth-child(2) { animation-delay: 0.3s; }
.impulse-dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes impulseDotPulse {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* 全屏通灵仪式遮罩 (背景比背景色微暗，烘托深空感) */
.commune-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: color-mix(in srgb, var(--color-bg-primary) 95%, #000);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.commune-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: -1;
}

.commune-overlay.show {
  opacity: 0.98;
  pointer-events: auto;
}

.commune-portal {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-ring-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  opacity: 0.4;
}

.portal-ring-active {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-top-color: var(--color-accent);
  border-right-color: var(--color-text-secondary);
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 3s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.commune-overlay.charging .portal-ring-active {
  transform: rotate(1080deg);
}

.portal-core {
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 70%);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 5%, transparent);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.portal-core:active {
  transform: scale(0.96);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  box-shadow: 0 0 35px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.commune-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-top: 32px;
  letter-spacing: 3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.commune-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 12px;
  max-width: 260px;
  text-align: center;
  line-height: 1.6;
}

.commune-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.commune-close:active {
  opacity: 0.7;
}

/* 在线共鸣屏幕边缘微光波纹特效 */
.resonance-ripple {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  box-shadow: inset 0 0 80px rgba(128, 90, 213, 0);
  pointer-events: none;
  z-index: 1999;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.resonance-ripple.play {
  animation: ripplePulse 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes ripplePulse {
  0% { 
    opacity: 0; 
    box-shadow: inset 0 0 20px rgba(128, 90, 213, 0); 
  }
  20% { 
    opacity: 0.85; 
    box-shadow: inset 0 0 70px var(--color-accent); 
  }
  100% { 
    opacity: 0; 
    box-shadow: inset 0 0 30px rgba(128, 90, 213, 0); 
  }
}
/* ==========================================================================
   五、 星图指引 (Tutorial) 特有样式与星座动效
   ========================================================================== */

.tutorial-container {
  position: relative;
  height: 100vh;
  height: 100dvh; /* 使用固定高度，防止双滚动条 */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 裁剪外层溢出 */
}

/* 星图背景与动效容器 */
.star-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.constellation-svg {
  width: 100%;
  height: 100%;
}

/* --- 星座移动动效机制 --- */

/* 星群1：缓慢做椭圆轨迹漂浮 */
.constellation-group.group-1 {
  animation: driftStarGroup1 35s ease-in-out infinite alternate;
  transform-origin: 200px 150px;
  will-change: transform; /* 开启硬件加速 */
}

/* 星群2：反向漂浮并伴随极慢的自转 */
.constellation-group.group-2 {
  animation: driftStarGroup2 40s ease-in-out infinite alternate;
  transform-origin: 200px 500px;
  will-change: transform; /* 开启硬件加速 */
}

/* 轨道虚线流动动效 */
.orbit-path {
  stroke-dasharray: 4, 8;
  animation: orbitFlow 60s linear infinite;
}
.orbit-path.path-2 {
  animation-direction: reverse;
  animation-duration: 80s;
}

/* 单个星子的独立呼吸闪烁 */
.twinkle-star {
  animation: starTwinkle 4s ease-in-out infinite;
  transform-origin: center;     /* 确保以星星自身中心点缩放 */
  transform-box: fill-box;       /* 规范 SVG 盒模型定位 */
  will-change: transform, opacity;
}
.twinkle-star:nth-child(2) { animation-delay: 1.5s; animation-duration: 5s; }
.twinkle-star:nth-child(3) { animation-delay: 3s; animation-duration: 3.5s; }

/* 星座连线的呼吸淡入淡出 */
.constellation-line {
  animation: linePulse 6s ease-in-out infinite alternate;
  will-change: opacity;
}

/* 动效关键帧 */
@keyframes driftStarGroup1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(15px, -20px) rotate(1deg); }
  100% { transform: translate(-10px, 15px) rotate(-1.5deg); }
}

@keyframes driftStarGroup2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-20px, 15px) rotate(-1.5deg); }
  100% { transform: translate(12px, -15px) rotate(1deg); }
}

@keyframes orbitFlow {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes linePulse {
  0% { opacity: 0.15; }
  100% { opacity: 0.45; }
}

/* --- 静态手账排版样式 --- */
.tutorial-top-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
}
.tut-btn-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.tut-btn-circle:active {
  background: rgba(255, 255, 255, 0.08);
}
.tut-title {
  font-size: 13px;
  letter-spacing: 6px;
  font-weight: 500;
  opacity: 0.8;
}

.tutorial-scroll-body {
  position: relative;
  z-index: 4;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 优化 iOS 滚动回弹 */
  padding: 10px 24px calc(60px + env(safe-area-inset-bottom)); /* 移入底部 Padding，适配安全区 */
  display: flex;
  flex-direction: column;
}

.tut-header {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 40px;
}
.tut-main-title {
  font-family: serif, system-ui;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 5px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.tut-subtitle {
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--color-text-secondary);
  opacity: 0.6;
}
.tut-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.tut-divider::before, .tut-divider::after {
  content: '';
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border));
}
.tut-divider::after {
  background: linear-gradient(270deg, transparent, var(--color-border));
}
.divider-diamond {
  font-size: 10px;
  color: var(--color-accent);
  margin: 0 8px;
  opacity: 0.7;
}

.tut-section {
  position: relative;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section-number {
  position: absolute;
  top: -14px; left: 20px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 500;
  z-index: 2;
}
.section-title {
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 14px;
  border-left: 2px solid var(--color-accent);
  padding-left: 8px;
}
.section-content {
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
  text-align: justify;
}
.section-content p {
  margin-bottom: 16px; /* 调整段落间距（从10px增加到16px），便于长文本阅读 */
}
.section-content p:last-child {
  margin-bottom: 0;
}
.tut-highlight {
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
  font-weight: 500;
}

.tut-footer {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 40px; /* 保证滑动到底部时有足够的呼吸感 */
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--color-text-tertiary);
  line-height: 2;
}
.star-cluster {
  margin-top: 10px;
  color: var(--color-accent);
  opacity: 0.5;
  letter-spacing: 6px;
}

/* 署名及说明性小字区 */
.author-credits {
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1px;
  opacity: 0.6;
}
.author-credits p {
  margin-bottom: 8px;
}
.author-credits p:last-child {
  margin-bottom: 0;
}