/* 通天塔 · 一键爬塔 —— 登录门动态背景 login-bg.css
   配套 login-bg.js（canvas 动态背景）与 climb.css（站点基础样式）。

   只做三件事：
     ① 背景 canvas 铺满全屏，垫在游戏画布之上、登录门之下；
     ② 登录门上加一层冷暖渐变压暗 —— 保证卡片与文字对比度够（也是 canvas 不在时的兜底底色）；
     ③ 登录卡片做成半透明毛玻璃，输入框/按钮在登录门作用域内加细节。
   游戏里的 .btn / .input 核心观感一个字没改：下面所有规则都限定在 .login-bg / .gate 之内，
   并且用双类名（.gate.gate）提高优先级，这样不管两个 css 谁先加载都不会互相打架。
   无外部资源：只有渐变、圆角、阴影和系统字体。 */

:root {
  --gate-glass: rgba(14, 18, 40, .78);      /* 卡片玻璃底 */
  --gate-glass-2: rgba(8, 10, 24, .88);     /* 卡片玻璃底（下沿，稍实） */
  --gate-glow: rgba(255, 138, 70, .16);     /* 暖色高光 */
}

/* ───────────── ① 背景 canvas ───────────── */
/* z-index: 1 —— 压在 .stage(自动) 之上、.screen(20) / .gate(70) / #boot(80) 之下 */
.login-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;          /* 绝不挡点击：输入框、按钮照常点 */
  /* 一点点调色：颜色更实、整体压暗半档，比纯盖一层灰更透亮（合成器一步搞定，不占每帧 CPU） */
  -webkit-filter: saturate(1.14) contrast(1.04) brightness(.93);
  filter: saturate(1.14) contrast(1.04) brightness(.93);
  transition: opacity .9s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.login-bg.is-on { opacity: 1; }

/* 换图用的叠层：冻着上一张画面淡出 = 交叉溶解（画在主导层级、主画布之后，所以盖在上面）。
   总时长 1.1s 不变，但用"前段快、后段拖尾"的曲线：两画面各占一半的那一小段（这时候
   太阳/月亮会短暂重影）压缩在前 0.3s 内过去，剩下的时间是旧画面极淡的拖尾，看着更柔。 */
.login-bg--fade { opacity: 0; transition: opacity 1.1s cubic-bezier(.25, .5, .45, 1); }
.login-bg--fade.is-hold { opacity: 1; transition: none; }

/* ───────────── ② 登录门：透出背景 + 冷暖渐变压暗 ───────────── */
/* 文字都在卡片里，这层的作用是给卡片一个"浮起来的夜色"，同时保证亮地图（雪原/云海）也不刺眼。
   压得比较克制（中间带只有 .10 左右），背景才看得出在动；实测卡片内文字仍有 7~14:1。 */
.gate.gate {
  background:
    radial-gradient(132% 86% at 50% -6%,
      rgba(8, 11, 26, .30) 0%, rgba(8, 11, 26, .10) 44%, rgba(5, 7, 18, .22) 100%),
    linear-gradient(180deg,
      rgba(10, 13, 30, .34) 0%, rgba(9, 12, 28, .10) 36%,
      rgba(14, 11, 26, .18) 70%, rgba(5, 6, 16, .48) 100%);
  /* 刘海屏 / 挖孔屏：竖屏靠上下内边距，横屏还要给左右留出安全区 */
  padding-left: calc(env(safe-area-inset-left, 0px) + 20px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 20px);
}

/* 登录门半透明之后，游戏里的浮动圆钮（💬 聊天 / 🗺 换图）会从底下透出来变成一块糊影，
   而且它们被登录门挡着本来就点不到 —— 干脆在登录门开着时收起来。
   这里用兄弟选择器（#login-screen 在它们前面）而不是 :has()，老浏览器照样认；
   万一以后登录门被挪到 </body> 前，这条会自己失效，不会连累别的样式。 */
#login-screen:not([hidden]) ~ #btn-chat,
#login-screen:not([hidden]) ~ #btn-scene-go {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s linear;
}

/* ───────────── ③ 登录卡片：半透明毛玻璃 ───────────── */
.gate .gate__box {
  padding: 26px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  /* 第一层是玻璃的斜向反光（左上角一道很淡的亮面），第二层才是墨蓝玻璃底；
     亮地图（雪原/云海）底下玻璃容易"发灰"，所以底色偏冷，压住暖色调的透光 */
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 30%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, var(--gate-glass) 0%, var(--gate-glass-2) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, .48),
    0 0 70px var(--gate-glow),
    0 1px 0 rgba(255, 255, 255, .16) inset,      /* 上沿一道亮线：玻璃厚度的感觉 */
    0 -1px 0 rgba(255, 150, 80, .10) inset;      /* 下沿一道极淡的暖边，呼应按钮 */
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-animation: gate-in .52s cubic-bezier(.22, .61, .36, 1) both;
  animation: gate-in .52s cubic-bezier(.22, .61, .36, 1) both;
}

@-webkit-keyframes gate-in {
  from { opacity: 0; -webkit-transform: translateY(12px) scale(.985); }
  to   { opacity: 1; -webkit-transform: none; }
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 不支持毛玻璃的浏览器：把卡片底色加实，一样读得清（不影响不透明度足够时的观感） */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .gate .gate__box {
    background:
      linear-gradient(150deg,
        rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 30%, rgba(255, 255, 255, 0) 56%),
      linear-gradient(180deg, rgba(20, 24, 44, .93) 0%, rgba(11, 13, 26, .96) 100%);
  }
}

/* 标题：只加光和一条短分隔线，字色仍是站点的金橙 */
.gate .gate__head { margin-bottom: 22px; }
.gate .gate__head::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 102, 0) 0%, #ffc466 45%, rgba(255, 122, 58, 0) 100%);
  opacity: .85;
}
.gate .gate__title { text-shadow: 0 8px 26px rgba(255, 154, 77, .34), 0 1px 0 rgba(255, 255, 255, .18); }
.gate .gate__sub { color: rgba(190, 199, 224, .78); }

/* 有 background-clip:text 才上金属渐变字，不支持就保持原来的金色实心字（不会变成隐形） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gate .gate__title {
    background: linear-gradient(178deg, #fff6df 2%, #ffd489 44%, #ff8f45 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    -webkit-filter: drop-shadow(0 8px 22px rgba(255, 140, 60, .38));
    filter: drop-shadow(0 8px 22px rgba(255, 140, 60, .38));
  }
}

/* 表单：标签与占位字提亮一点，输入框做成玻璃里的一块深色，聚焦有暖色描边。
   输入框不再自己叠一层 backdrop-filter —— 它整个躺在已经糊过的卡片玻璃上，再加一层看不出
   差别，却要多占一张离屏纹理（老手机 GPU 吃紧），这里省掉。
   （占位字实测：改前约 4.8:1，改到这版约 5.6:1） */
.gate .field { color: rgba(184, 194, 220, .94); }
.gate .input {
  background: rgba(8, 11, 24, .52);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}
.gate .input::placeholder { color: rgba(155, 164, 192, .92); }
.gate .input:focus {
  border-color: rgba(255, 196, 102, .62);
  background: rgba(10, 13, 28, .60);
  box-shadow: 0 0 0 3px rgba(255, 150, 70, .16), 0 8px 20px rgba(255, 122, 58, .12);
}

/* 主按钮：站点原来的金橙渐变原样保留，只补一层高光与投影，按下去更"实" */
.gate .btn--primary {
  box-shadow: 0 12px 28px rgba(255, 122, 58, .40), 0 1px 0 rgba(255, 255, 255, .34) inset;
}
.gate .btn--primary:active:not(:disabled) {
  box-shadow: 0 5px 14px rgba(255, 122, 58, .34), 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.gate .linkbtn { color: rgba(170, 179, 205, .9); text-decoration: underline; text-decoration-color: rgba(170, 179, 205, .3); text-underline-offset: 3px; }
.gate .linkbtn:active { color: var(--gold); }
.gate .regcode { background: rgba(255, 255, 255, .05); }

/* 横屏 / 小屏（可视高度很矮时）：卡片收紧，别被挤到要滚动 */
@media (max-height: 620px) {
  .gate .gate__box { padding: 18px 18px 14px; border-radius: 22px; }
  .gate .gate__head { margin-bottom: 14px; }
  .gate .gate__head::after { display: none; }
  .gate .gate__title { font-size: 30px; }
  .gate .input { margin-bottom: 11px; }
}

/* 手机横过来（可视高度 ≤520px，例如 844x390）：再把卡片压紧一档，让 登录 按钮一定在屏幕里。
   输入框仍然 ≥48px、按钮 ≥52px —— 手指点得到这条底线不动。 */
@media (max-height: 520px) {
  .gate.gate {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .gate .gate__box { padding: 14px 16px 12px; border-radius: 20px; }
  .gate .gate__head { margin-bottom: 10px; }
  .gate .gate__title { font-size: 26px; }
  .gate .gate__sub { margin-top: 5px; font-size: 12px; }
  .gate .field { margin-bottom: 4px; font-size: 11.5px; }
  .gate .input { height: 48px; margin-bottom: 9px; }
  .gate .btn--big { min-height: 52px; font-size: 17px; }
  .gate .linkbtn { min-height: 44px; margin-top: 6px; font-size: 13px; }
  .gate .regcode { padding: 14px; }
}

/* 系统要求少动：背景停在静态一帧，卡片的入场动画也去掉 */
@media (prefers-reduced-motion: reduce) {
  .login-bg { transition: none; }
  .login-bg--fade { transition: none; }
  .gate .gate__box { -webkit-animation: none; animation: none; }
}