/* ==========================================================
   启动页样式（舞台布局在 theme.css 中统一定义）
   ========================================================== */

/* ---------- 启动页 ---------- */
.launch {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, #FFE8F0 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, #FFF0DC 0%, transparent 50%),
    linear-gradient(165deg, #FFF6F9 0%, #FFE4EE 55%, #FFD1E1 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 48px 28px;
}

/* 背景装饰：漂浮的圆点 */
.bg-dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-dots i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: .55;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  15%  { opacity: .6; }
  85%  { opacity: .5; }
  100% { transform: translateY(-260px) scale(1.25); opacity: 0; }
}

/* 顶部标题 */
.launch-header { text-align: center; position: relative; z-index: 2; }
.launch-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--pink-700);
  text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(214, 56, 114, .22);
}
.launch-sub {
  margin-top: 8px;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--ink-soft);
}

/* 角色卡片区 */
.role-row {
  display: flex;
  gap: 26px;
  margin-top: 34px;
  position: relative;
  z-index: 2;
}

.role-card {
  width: 210px;
  height: 292px;
  border-radius: var(--r-xl);
  background: var(--cream);
  border: 3px solid #fff;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.role-card:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); }
.role-card:active { transform: translateY(-2px); }

.role-avatar {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--pink-100), var(--pink-200));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-inner);
  overflow: hidden;
}
.role-avatar img { width: 122px; height: 122px; object-fit: contain; }
.role-avatar svg { width: 108px; height: 108px; }

.role-name {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.role-meta {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink-faint);
}
.role-enter {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: var(--pink-500);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 0 var(--pink-700);
}
.role-enter:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-700); }

/* 新建角色卡 */
.role-card.add {
  background: rgba(255, 255, 255, .55);
  border: 3px dashed var(--pink-300);
  box-shadow: none;
  justify-content: center;
  gap: 14px;
}
.role-card.add .plus {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--pink-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 300; color: var(--pink-700); line-height: 1;
}
.role-card.add span { font-size: 16px; color: var(--pink-700); font-weight: 600; }

/* 底部工具条 */
.launch-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8);
  color: var(--pink-700);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sh-sm);
}
.pill-btn svg { width: 18px; height: 18px; }

/* ---------- 环境自检面板 ---------- */
.diag {
  position: absolute;
  right: 22px;
  bottom: 78px;
  width: 300px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--sh-md);
  padding: 14px 16px;
  font-size: 13px;
  z-index: 5;
}
.diag h4 {
  font-size: 14px;
  color: var(--pink-700);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.diag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--pink-100);
  color: var(--ink-soft);
}
.diag-row:last-child { border-bottom: none; }
.diag-val { font-weight: 700; color: var(--ink); }
.diag-val.ok   { color: var(--mint-deep); }
.diag-val.bad  { color: var(--danger); }
.diag-val.wait { color: var(--ink-faint); }