/* ==========================================================================
 * 胜利游戏 · 登录页样式
 * 文件路径：web/css/login.css
 *
 * 全屏背景完全由 CSS 绘制（渐变 + 色块 + 几何形状 + emoji 字符图标），
 * 不引用任何外部图片 / 字体 / CDN。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. 全屏背景舞台
 * -------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  /* 天空：浅蓝 → 淡青 → 暖黄（卡通白天的感觉） */
  background: linear-gradient(180deg,
    #a8dcff 0%,
    #c6e9ff 22%,
    #e2f4ff 44%,
    #f3fbff 60%,
    #fff9e8 76%,
    #eaf7e0 100%);
}

/* 太阳光晕 */
.stage .sun {
  position: absolute;
  top: 60px;
  right: 12%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fffdf0 0%, #fff3b8 32%, rgba(255, 236, 150, .55) 52%, rgba(255, 236, 150, 0) 72%);
  animation: sunPulse 7s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1);    opacity: .95; }
  50%      { transform: scale(1.09); opacity: 1; }
}

/* --------------------------------------------------------------------------
 * 2. 云朵：用 border-radius 50% 的白色圆球拼成，纯 CSS 几何
 * -------------------------------------------------------------------------- */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: .92;
  filter: blur(.3px);
  box-shadow: 0 6px 18px rgba(148, 190, 235, .28);
}
/* 每朵云用 ::before / ::after 补两个球，形成云形 */
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 60%; height: 118%; left: 8%;  top: -46%; }
.cloud::after  { width: 48%; height: 96%;  right: 6%; top: -30%; }

.cloud-1 { width: 190px; height: 62px; top: 13%; left: 8%;  animation: drift 46s linear infinite; }
.cloud-2 { width: 140px; height: 48px; top: 25%; left: 62%; opacity: .78; animation: drift 62s linear infinite; }
.cloud-3 { width: 230px; height: 72px; top: 6%;  left: 40%; opacity: .68; animation: drift 80s linear infinite; }
.cloud-4 { width: 120px; height: 42px; top: 38%; left: 20%; opacity: .6;  animation: drift 70s linear infinite; }
.cloud-5 { width: 170px; height: 56px; top: 46%; left: 74%; opacity: .5;  animation: drift 90s linear infinite; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(150px); }
}

/* --------------------------------------------------------------------------
 * 3. 远山：clip-path 三角形，两层色阶制造景深
 * -------------------------------------------------------------------------- */
.mount {
  position: absolute;
  bottom: 30%;
  width: 0;
  height: 0;
  opacity: .9;
}
.mount-1 { left: 3%;  border-left: 190px solid transparent; border-right: 190px solid transparent; border-bottom: 210px solid #b9dcf7; }
.mount-2 { left: 20%; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 170px solid #cde6f9; }
.mount-3 { right: 6%; border-left: 220px solid transparent; border-right: 220px solid transparent; border-bottom: 240px solid #b0d6f5; }
.mount-4 { right: 26%; border-left: 130px solid transparent; border-right: 130px solid transparent; border-bottom: 150px solid #d5eafb; }

/* 山顶积雪：小块白色三角 */
.mount-1::after {
  content: '';
  position: absolute;
  left: -56px; bottom: 152px;
  border-left: 56px solid transparent;
  border-right: 56px solid transparent;
  border-bottom: 60px solid rgba(255, 255, 255, .85);
}
.mount-3::after {
  content: '';
  position: absolute;
  left: -68px; bottom: 172px;
  border-left: 68px solid transparent;
  border-right: 68px solid transparent;
  border-bottom: 72px solid rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
 * 4. 草地：底部两层波浪（用大圆角矩形露出的圆弧）
 * -------------------------------------------------------------------------- */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, #b8e6a0 0%, #9bd97f 42%, #7fcb63 100%);
}
.ground::before {
  content: '';
  position: absolute;
  left: -6%; right: -6%; top: -58px;
  height: 120px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #c9eeb5 0%, #a9de8c 100%);
}
.ground::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%; top: -30px;
  height: 90px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
}

/* --------------------------------------------------------------------------
 * 5. 场景装饰物：全部用 emoji 字符 + 色块几何图形
 * -------------------------------------------------------------------------- */
.deco {
  position: absolute;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(80, 130, 90, .22));
}
/* 树（色块树冠 + 树干） */
.tree {
  position: absolute;
  pointer-events: none;
  bottom: 4%;
}
.tree .crown {
  width: 76px; height: 76px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 36% 30%, #a8e88a 0%, #77cc5c 52%, #4fae3c 100%);
  box-shadow: inset -6px -8px 14px rgba(38, 108, 34, .18), inset 5px 6px 12px rgba(255, 255, 255, .35);
}
.tree .trunk {
  width: 16px; height: 42px;
  margin: -10px auto 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #a9713f, #c98a52 40%, #8d5a2f);
}

/* 灌木 */
.bush {
  position: absolute;
  pointer-events: none;
  width: 92px; height: 46px;
  border-radius: 46px 46px 12px 12px;
  background: radial-gradient(circle at 34% 26%, #b6ec96 0%, #83cf68 55%, #5bb144 100%);
  box-shadow: inset -5px -6px 10px rgba(38, 108, 34, .16);
}

/* 石板路（色块几何） */
.path {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 360px;
  height: 30%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(226, 214, 190, .55) 60%, rgba(214, 200, 172, .75) 100%);
  clip-path: polygon(44% 0, 56% 0, 88% 100%, 12% 100%);
}

/* 城堡 / 龙 / 武器 / 草地小装饰的位置与大小
   —— 全部摆在屏幕左右两侧，中间留给登录卡片，画面不打架 */
.deco-castle  { left: 7%;   bottom: 21%; font-size: 96px; opacity: .96; }
.deco-dragon  { right: 10%; top: 14%;    font-size: 50px; opacity: .9; animation: floatY 5.5s ease-in-out infinite; }
.deco-sword   { left: 21%;  bottom: 6%;  font-size: 42px; opacity: .92; transform: rotate(-14deg); }
.deco-shield  { right: 20%; bottom: 5%;  font-size: 38px; opacity: .92; transform: rotate(10deg); }
.deco-tower   { right: 5%;  bottom: 19%; font-size: 74px; opacity: .95; }
.deco-grass1  { left: 33%;  bottom: 11%; font-size: 26px; opacity: .85; }
.deco-grass2  { right: 32%; bottom: 13%; font-size: 24px; opacity: .8; }
.deco-grass3  { left: 64%;  bottom: 8%;  font-size: 22px; opacity: .78; }
.deco-star1   { left: 30%;  top: 7%;     font-size: 20px; opacity: .85; animation: sparkle 3.4s ease-in-out infinite; }
.deco-star2   { right: 30%; top: 32%;    font-size: 17px; opacity: .8;  animation: sparkle 4.2s ease-in-out infinite .8s; }
.deco-star3   { left: 82%;  top: 44%;    font-size: 18px; opacity: .75; animation: sparkle 3.8s ease-in-out infinite 1.5s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
@keyframes sparkle {
  0%, 100% { opacity: .28; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* --------------------------------------------------------------------------
 * 6. 居中登录卡片（极简：两个输入框 + 一个按钮）
 * -------------------------------------------------------------------------- */
.login-layer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.login-card {
  width: 396px;
  padding: 38px 38px 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 26px 60px rgba(63, 118, 178, .26), 0 2px 0 rgba(255, 255, 255, .9) inset;
  animation: cardIn .55s cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 卡片顶部徽标 */
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 24px;
  font-size: 40px;
  background: linear-gradient(150deg, #dcefff 0%, #a9d3fb 55%, #7fbcf5 100%);
  box-shadow: 0 10px 22px rgba(74, 144, 226, .34), inset 0 2px 0 rgba(255, 255, 255, .9);
}

.login-title {
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #2b4f77;
}
.login-sub {
  margin: 6px 0 26px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: #93a8bd;
}

/* 输入框（带左侧 emoji 图标） */
.login-field { position: relative; margin-bottom: 16px; }
.login-field .f-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .75;
  pointer-events: none;
}
.login-field .input {
  height: 48px;
  padding-left: 44px;
  background: rgba(255, 255, 255, .92);
  border-radius: 12px;
  font-size: 14.5px;
}
.login-field .input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, .13), 0 4px 12px rgba(74, 144, 226, .16);
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
}

/* 底部提示（GM 账号说明，仅提示文案，不提供任何入口） */
.login-tip {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #dae7f4;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: #9aaec2;
}
.login-tip .hl { color: var(--c-primary); font-weight: 600; }

/* 底部版权 */
.login-footer {
  position: relative;
  z-index: 10;
  margin-top: -46px;
  padding-bottom: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(74, 112, 150, .6);
}

/* ==========================================================================
 * 注册入口 + 注册弹窗（2026-10-15 老板加：登录按钮下面放一个「注 册」）
 * 按钮与登录按钮同一套（同宽、同高、同圆角、同字号、同字间距），
 * 只是配色浅一档：白底 + 蓝字 + 淡边框，主次分明又保持「跟登录一样」的观感。
 * ========================================================================== */
.login-btn-reg {
  margin-top: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--c-primary);
  border: 1px solid #bcd8f5;
  box-shadow: 0 4px 12px rgba(74, 144, 226, .1);
}
.login-btn-reg:hover {
  background: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 8px 20px rgba(74, 144, 226, .22);
  transform: translateY(-1px);
}

/* 弹窗默认是隐藏的：.mask 用了 display:flex，必须显式覆盖 hidden 属性 */
.mask[hidden] { display: none; }

/* 注册弹窗（字段比通用弹窗多，宽一点、间距松一点） */
.reg-modal { width: 456px; }
.reg-modal .modal-body { padding: 14px 24px 6px; }
.reg-modal .m-label { margin: 13px 0 8px; }
.reg-modal .m-label:first-child { margin-top: 2px; }
.reg-modal .m-hint { margin: 6px 0 0; }
.reg-modal .req { color: #e2574c; font-style: normal; font-weight: 700; }

/* 弹窗里的提示行：成功绿字、失败红字（失败一律说清是哪里的问题） */
.reg-msg {
  min-height: 20px;
  margin: 14px 0 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-light);
}
.reg-msg-error { color: #d9453a; }
.reg-msg-ok    { color: #2e9e63; }

/* --------------------------------------------------------------------------
 * 后端未接通时的降级提示条（登录页顶部，醒目但压不住表单）
 * 由 js/auth.js 的 markBackendDown() 动态插入，只在真后端不可用时出现一次。
 * -------------------------------------------------------------------------- */
.backend-tip {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: 760px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff5e6;
  border: 1px solid #ffcf8b;
  color: #a35b00;
  font-size: 13.5px;
  line-height: 1.65;
  text-align: center;
  box-shadow: 0 6px 18px rgba(180, 120, 20, 0.16);
}
.backend-tip b { color: #d9480f; }