/* ===== 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); }

/* ===== v4（2026-11-08）注册页「同意协议」勾选 =====
   🔴 必须写成 `.auth-form .auth-agree`（0,2,0）：`.auth-form label` 是 (0,1,1) 且为 column 布局，
      直接写 `.auth-agree` 会被压成竖排（勾选框跑到文字上方一行）。 */
.auth-form .auth-agree {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.65;
  color: #7a6048;
  cursor: pointer;
}
.auth-form .auth-agree input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  /* 🔴 必须显式重置：`.auth-form input` 有 min-height:44px + padding:12px 14px，
     checkbox 会被撑成 18×44 的竖长条（实测 getBoundingClientRect 抓到 h=44）。 */
  min-height: 0;
  margin: 1px 0 0; /* 与文字首行视觉对齐（align-items: flex-start） */
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  accent-color: #8a5cff;
  cursor: pointer;
}
.auth-form .auth-agree a { color: #8a5cff; font-weight: 800; text-decoration: underline; }
.auth-form .auth-agree a:hover { color: #b794ff; }
/* 未勾选就提交：整行标红（按钮**不 disabled**，只提示） */
.auth-form .auth-agree.need-agree { color: #d24b5d; }
.auth-form .auth-agree.need-agree a { color: #d24b5d; }

/* 登录页底部的协议入口：弱化，不抢「立即注册」的注意力 */
.auth-switch.auth-legal { font-size: 12px; font-weight: 600; opacity: .8; }
.auth-switch.auth-legal a { font-weight: 700; }