/* 墨线分镜 · 登录页（W6-L）。结构见 login.js；微信端 Canvas 版（src/game.js 的 loginLayout / renderLogin）与这里同一套尺寸，改一边要同步另一边。
 * 版式是「海报 + 标题压底」：
 *   海报：按屏宽铺满、顶部对齐（2:3），左右不裁；海报下缘以下是墨黑 #111，海报下部 28% 叠一层由透明到 #111 的渐变，自然融进底部
 *   顶部：不放任何 UI（状态栏与右上胶囊底下就是海报）
 *   底部自下而上：QQ 群 → 44px 高的小贴纸 + 版本号 → 主按钮 80% 宽 × 64px → 黑胶带 → 标题组合
 *   标题组合：横排整体居中，左边徽记 88px，右边 124px 宽的文字列（烬 环 44px + EMBERRING 15px），两者间距 10px
 *   矮屏（屏高 ≤700）：去掉胶带，主按钮 56px，徽记 64px，标题组合上沿仍落在海报英灵的脸（海报高度 30%–66%）之下
 * 背景图是唯一的美术引用点：.ink-login__bg 的 url()，换新海报只换这个文件（比例要保持 2:3）。 */

.ink-login {
  background: var(--ink);
  color: var(--white);
}
.ink-login > * { position: relative; z-index: 2; }

/* ---------- 底：海报 / 底部渐变 / 底部两角网点暗角 ---------- */
.ink-login > .ink-login__bg,
.ink-login > .ink-login__shade,
.ink-login > .ink-login__dots {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* 海报盒与渐变盒同形：宽取满，高按 2:3；屏比海报还矮时（桌面窄窗）盒高收到屏高，渐变仍贴在可见的最下沿 */
.ink-login__bg,
.ink-login__shade {
  top: 0; left: 0; right: 0;
  aspect-ratio: 2 / 3;
  max-height: 100%;
}
.ink-login__bg {
  background: var(--ink) url("../../assets/ui/login_bg.webp") 0 0 / 100% auto no-repeat;
}
.ink-login__shade {
  background: linear-gradient(180deg,
    rgba(17, 17, 17, 0) 72%,
    rgba(17, 17, 17, .22) 80%,
    rgba(17, 17, 17, .62) 89%,
    rgba(17, 17, 17, .9) 95%,
    #111111 100%);
}
.ink-login__dots {
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .3) 24%, transparent 28%);
  background-size: 8px 8px;
  -webkit-mask-image:
    radial-gradient(circle 140px at 0 100%, #000, transparent),
    radial-gradient(circle 140px at 100% 100%, #000, transparent);
  mask-image:
    radial-gradient(circle 140px at 0 100%, #000, transparent),
    radial-gradient(circle 140px at 100% 100%, #000, transparent);
  opacity: .5;
}

/* ---------- 底部：标题组合 / 胶带 / 主按钮 / 小行 / QQ 群 ---------- */
.ink-login__dock {
  margin-top: auto;
  flex: none;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: calc(var(--safe-bottom) + 16px);
}
.ink-login__brand {
  display: flex; align-items: center; gap: 10px;
}
.ink-login__emblem {
  display: block; flex: none;
  width: 88px; height: 88px;
  pointer-events: none;
}
.ink-login__name {
  flex: none;
  width: 124px;
  display: flex; flex-direction: column; align-items: center;
}
.ink-login__en {
  margin-top: 4px;
  font-size: 15px; line-height: 18px; letter-spacing: .34em;
  padding-left: .34em; /* 抵掉末字后的字距，视觉居中 */
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--ink);
}
.ink-login__dock .ink-tape {
  margin-top: 8px;
  height: 24px; padding: 0 14px;
  font-size: 13px;
}
.ink-login__cta {
  width: 80%; min-height: 64px;
  margin: 14px 0 16px;
  font-size: 24px; letter-spacing: .12em;
}
.ink-login__cta.is-entering {
  box-shadow: 1px 1px 0 var(--red);
  animation: ink-login-slam .3s linear both;
}
@keyframes ink-login-slam {
  0%   { transform: skewX(-8deg) translate(0, 0); }
  25%  { transform: skewX(-8deg) translate(5px, 5px); }
  45%  { transform: skewX(-8deg) translate(2px, 5px); }
  65%  { transform: skewX(-8deg) translate(8px, 5px); }
  85%  { transform: skewX(-8deg) translate(3px, 5px); }
  100% { transform: skewX(-8deg) translate(5px, 5px); }
}

.ink-login__row {
  width: 80%; min-height: 44px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.ink-login__left { display: flex; align-items: center; gap: 10px; }
.ink-login__mini {
  min-height: 44px; padding: 0 14px;
  font-size: 13px;
  box-shadow: 3px 3px 0 #3a3a3a;
}
.ink-login__mini:active { transform: skewX(-10deg) translate(2px, 2px); box-shadow: 1px 1px 0 #3a3a3a; }
.ink-login__ver {
  font-size: 14px; letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}
.ink-login__qq {
  font-size: 12px; font-weight: 800; line-height: 17px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .7);
}

/* ---------- 矮屏（高 ≤700）：去胶带，主按钮 56，徽记 64 ---------- */
@media (max-height: 700px) {
  .ink-login__dock .ink-tape { display: none; }
  .ink-login__cta { min-height: 56px; }
  .ink-login__emblem { width: 64px; height: 64px; }
}