/* ===== auth.css · 登录/注册/兑换/会员墙（奶油糖果卡风格） ===== */

/* 顶栏登录按钮（胶囊，与 .stat 同族） */
.topbar-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 14px;
  background: var(--bg-card);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: transform .12s, background .12s, box-shadow .12s;
  white-space: nowrap;
}
.topbar-auth:hover { transform: scale(1.05); background: var(--brand-soft); box-shadow: 0 0 16px var(--brand-soft); }
.auth-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6b6285; /* 未激活：暗灰 */
  display: inline-block;
}
.auth-dot.on {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 216, 102, 0.9);
  animation: glow-pulse 2s ease-in-out infinite;
}

/* 弹窗遮罩（高于游戏 #overlay 的 50） */
.auth-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 4, 32, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-overlay.show { display: flex; animation: pop .25s ease; }
.auth-modal { width: 100%; max-width: 400px; }

/* 表单 */
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #7a6048;
}
.auth-form input {
  font-family: var(--font);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #a8e6dd;
  background: #fffdf7;
  color: #3a2818;
  min-height: 44px;
  transition: border-color .12s, box-shadow .12s;
}
.auth-form input:focus {
  outline: none;
  border-color: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
}
.auth-form input::placeholder { color: #c4b096; }

/* 验证码行：输入框 + 图 */
.auth-cap-row { display: flex; gap: 10px; align-items: center; }
.auth-cap-row input { flex: 1; text-transform: uppercase; letter-spacing: 2px; }
.auth-cap-img {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  min-width: 120px; height: 44px;
  display: grid; place-items: center;
  background: #fff8ec;
  border: 2px solid #a8e6dd;
  flex-shrink: 0;
}
.auth-cap-img svg { display: block; }

/* 提示行 */
.auth-tip { font-size: 13px; font-weight: 700; min-height: 18px; }
.auth-tip.bad { color: #d24b5d; }
.auth-tip.ok { color: #16a34a; }
/* 说明性灰字：用于字段下方的默认解释（如「手机号也是登录账号」）。
   比 label 淡一档，避免被误读成下一个字段的标题。 */
.auth-tip.hint { color: #a8927a; font-weight: 600; }

/* 提交按钮（紫渐变 .btn 在奶油卡上也醒目） */
.auth-submit { width: 100%; }

/* 底部切换链接 */
.auth-switch { text-align: center; font-size: 13px; color: #7a6048; font-weight: 700; }
.auth-switch a { color: #8a5cff; cursor: pointer; text-decoration: underline; font-weight: 800; }
.auth-switch a:hover { color: #b794ff; }

/* 会员状态徽章 */
.auth-member-badge {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}
.auth-member-badge.on {
  background: rgba(255, 216, 102, 0.2);
  border: 2px dashed #f0b429;
  color: #9a6b00;
}
.auth-member-badge.off {
  background: rgba(122, 96, 72, 0.08);
  border: 2px dashed #d8c8b0;
  color: #7a6048;
}

/* 小屏适配：顶栏按钮缩字 */
@media (max-width: 560px) {
  .topbar-auth { font-size: 12px; padding: 7px 10px; }
}

/* ===== 2026-09-12 登录/注册分离：顶栏注册按钮 ===== */
.topbar-reg { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color: #fff; border-color: transparent; }
.topbar-reg:hover { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 0 16px rgba(16, 185, 129, 0.5); }