/* =========================================================
   login.css —— 登录面板、输入框、按钮、第三方登录、协议
   面板在设计稿中的位置：x 477 ~ 1059，y 455 ~ 925（582 × 470）
   面板内部元素坐标均相对面板左上角
   ========================================================= */

.login-panel {
  position: absolute;
  z-index: 6;
  left: calc(477 * var(--u));
  top: calc(455 * var(--u));
  width: calc(582 * var(--u));
  height: calc(470 * var(--u));
  animation: panel-in 0.6s 0.25s ease-out both;
}

/* 面板底图：素材 panel.webp 532×432，其中可见面板 520×420，四周 6px 透明留边
   等比缩放 1.12 倍，并向外偏移留边，使可见边框与 .login-panel 对齐 */
.login-panel__bg {
  position: absolute;
  left: calc(-6.72 * var(--u));
  top: calc(-6.72 * var(--u));
  width: calc(595.84 * var(--u));
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(8, 45, 110, 0.35));
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(calc(24 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-form {
  position: absolute;
  inset: 0;
}

/* ---------- 输入框 ---------- */
.field {
  position: absolute;
  left: calc(48 * var(--u));
  width: calc(486 * var(--u));
  height: calc(58 * var(--u));
  display: flex;
  align-items: center;
  border: calc(2 * var(--u)) solid var(--c-border);
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, #ffffff 0%, #f1f6fd 100%);
  box-shadow:
    inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(60, 100, 170, 0.12),
    0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.9);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.field--account  { top: calc(37 * var(--u)); z-index: 3; }
.field--password { top: calc(112 * var(--u)); z-index: 2; }

/* 获得焦点：蓝色描边 + 外发光 + 轻微提亮 */
.field:focus-within {
  border-color: #3a8bff;
  background: #ffffff;
  box-shadow:
    inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(60, 100, 170, 0.08),
    0 0 0 calc(3 * var(--u)) rgba(58, 139, 255, 0.28),
    0 0 calc(14 * var(--u)) rgba(255, 214, 80, 0.55);
}

.field__icon {
  flex: none;
  width: calc(40 * var(--u));
  height: auto;
  margin-left: calc(12 * var(--u));
}

.field__sep {
  flex: none;
  width: calc(2 * var(--u));
  height: calc(26 * var(--u));
  margin: 0 calc(16 * var(--u)) 0 calc(10 * var(--u));
  border-radius: calc(1 * var(--u));
  background: #b7c8e2;
}

.field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--c-text);
  font-size: calc(22 * var(--u));
  letter-spacing: calc(1 * var(--u));
  caret-color: var(--c-blue);
}

.field__input::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

/* 隐藏 Edge/IE 自带的密码显示按钮，避免和自定义眼睛按钮重复 */
.field__input::-ms-reveal,
.field__input::-ms-clear { display: none; }

/* 浏览器自动填充时保持原底色 */
.field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  -webkit-text-fill-color: var(--c-text);
}

.field__action {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin-right: calc(6 * var(--u));
  border-radius: 50%;
  transition: transform .15s, filter .15s;
}

.field__action img {
  width: calc(38 * var(--u));
  height: auto;
}

.field__action:hover { filter: brightness(1.06); }
.field__action:active { transform: scale(.9); }

.field__action[aria-expanded="true"] img { transform: rotate(180deg); }

/* 默认（密码隐藏）与参考图一致显示睁眼图标；明文状态加一道斜线表示“点击隐藏” */
.field__action--eye { position: relative; }
.field__action--eye[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  width: calc(30 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--c-blue);
  box-shadow: 0 0 0 calc(1.5 * var(--u)) #fff;
  transform: rotate(-40deg);
  pointer-events: none;
}

/* ---------- 历史账号下拉 ---------- */
.account-list {
  position: absolute;
  left: calc(-2 * var(--u));
  right: calc(-2 * var(--u));
  top: calc(100% + 4 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border: calc(2 * var(--u)) solid var(--c-border);
  border-radius: calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(20, 60, 130, 0.25);
}

.account-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(18 * var(--u)) 0 calc(80 * var(--u));
  height: calc(44 * var(--u));
  font-size: calc(20 * var(--u));
  color: var(--c-text);
  cursor: pointer;
}

.account-list li:hover,
.account-list li[aria-selected="true"] { background: #eaf2ff; }

.account-list .account-list__del {
  font-size: calc(22 * var(--u));
  color: #8aa0c2;
  padding: 0 calc(6 * var(--u));
}

/* ---------- 记住密码 / 忘记密码 ---------- */
.options {
  position: absolute;
  left: calc(48 * var(--u));
  width: calc(486 * var(--u));
  top: calc(181 * var(--u));
  height: calc(28 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  color: var(--c-blue-text);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  cursor: pointer;
}

.check input,
.agree-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* 未勾选：白底蓝边；勾选：使用素材 icon-checkbox.webp */
.check__box {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  border: calc(2 * var(--u)) solid #3a7fe0;
  border-radius: calc(6 * var(--u));
  background: #fff center / 100% 100% no-repeat;
  transition: transform .15s;
}

.check input:checked + .check__box {
  border-color: transparent;
  background-color: transparent;
  background-image: url("../assets/icon-checkbox.webp");
  background-size: 128% auto;
}

.check:active .check__box { transform: scale(.88); }

.check input:focus-visible + .check__box,
.agree-check input:focus-visible + .agree-check__box {
  outline: calc(3 * var(--u)) solid #ffd84a;
  outline-offset: calc(2 * var(--u));
}

.link-forgot { color: var(--c-blue-text); }
.link-forgot:hover { color: #0b3f9a; text-decoration: underline; }

/* ---------- 登录游戏按钮（使用素材 btn-login.png） ---------- */
.btn-login {
  position: absolute;
  left: calc(136 * var(--u));
  top: calc(217 * var(--u));
  width: calc(310 * var(--u));
  height: calc(86 * var(--u));
  transition: transform .18s ease, filter .18s ease;
}

.btn-login img {
  width: 100%;
  height: auto;
  animation: btn-breathe 2.2s ease-in-out infinite;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(190, 110, 0, 0.35));
}

.btn-login:hover { transform: scale(1.04); filter: brightness(1.08); }
.btn-login:active { transform: scale(.95) translateY(calc(3 * var(--u))); filter: brightness(.96); }

.btn-login.is-loading { pointer-events: none; filter: grayscale(.25) brightness(.95); }
.btn-login.is-loading img { animation: none; }

@keyframes btn-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ---------- 其他登录方式 ---------- */
.divider {
  position: absolute;
  left: calc(58 * var(--u));
  right: calc(58 * var(--u));
  top: calc(318 * var(--u));
  height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: calc(18 * var(--u));
  color: #3c5a86;
  white-space: nowrap;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: calc(1.5 * var(--u));
  background: linear-gradient(90deg, rgba(90, 130, 190, 0.15), rgba(90, 130, 190, 0.6));
}

.divider::after { transform: scaleX(-1); }

.social-list {
  position: absolute;
  left: calc(46 * var(--u));
  right: calc(46 * var(--u));
  top: calc(345 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: transform .15s ease, filter .15s ease;
}

.social-btn img {
  width: calc(91 * var(--u));
  height: auto;
}

.social-btn span {
  margin-top: calc(-1 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.2;
  color: #2c4a7c;
  white-space: nowrap;
}

.social-btn:hover { transform: translateY(calc(-3 * var(--u))); filter: brightness(1.06); }
.social-btn:active { transform: scale(.92); }

/* ---------- 用户协议（面板下方居中） ---------- */
.agreement {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: calc(955 * var(--u));
  height: calc(34 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(10, 40, 30, 0.9),
    0 0 calc(5 * var(--u)) rgba(10, 40, 30, 0.6);
  animation: panel-in 0.6s 0.4s ease-out both;
}

.agree-check {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  cursor: pointer;
}

.agree-check__box {
  position: relative;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35);
  transition: transform .15s;
}

.agree-check input:checked + .agree-check__box {
  background: linear-gradient(180deg, #ffc93c, #ff9a0b);
}

.agree-check input:checked + .agree-check__box::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 14%;
  width: 30%;
  height: 52%;
  border: solid #fff;
  border-width: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  transform: rotate(45deg);
}

.agree-check:active .agree-check__box { transform: scale(.88); }

/* 未勾选时登录，提醒用户 */
.agreement.is-shake { animation: shake .4s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(calc(-8 * var(--u))); }
  75%      { transform: translateX(calc(8 * var(--u))); }
}

.agreement__link {
  margin: 0 calc(2 * var(--u));
  color: #8fe0ff;
}

.agreement__link:hover { color: #c8f0ff; text-decoration: underline; }

/* =========================================================
   注册（与登录共用面板）
   面板内坐标：账号 26 / 密码 90 / 昵称 154 / 头像 220 / 按钮 318 / 返回 404
   ========================================================= */

/* 登录表单右侧链接：忘记密码 | 注册账号 */
.options__links {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.options__sep { color: #9db4d8; font-weight: 400; }

.link-register { color: #ff8a00; }
.link-register:hover { color: #e06a00; text-decoration: underline; }

/* 注册状态：隐藏第三方登录 */
.login-panel.is-register .divider,
.login-panel.is-register .social-list { display: none; }

.register-form {
  position: absolute;
  inset: 0;
}

.register-form[hidden],
.login-form[hidden] { display: none; }

.field--reg { height: calc(52 * var(--u)); }
.field--reg-account  { top: calc(26 * var(--u)); }
.field--reg-password { top: calc(90 * var(--u)); }
.field--reg-nickname { top: calc(154 * var(--u)); }

.field--reg .field__input { font-size: calc(20 * var(--u)); }

/* 昵称框左侧显示当前选择的头像 */
.field__icon--avatar {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 22%;
  object-fit: cover;
  background: #e3eefc;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff, 0 0 0 calc(3 * var(--u)) #b9cdeb;
}

/* 头像选择 */
.avatar-picker {
  position: absolute;
  left: calc(48 * var(--u));
  top: calc(220 * var(--u));
  width: calc(486 * var(--u));
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.avatar-picker__label {
  float: left;
  padding: 0;
  margin-right: calc(4 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 600;
  color: var(--c-blue-text);
  white-space: nowrap;
}

.avatar-option {
  position: relative;
  flex: none;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border: calc(3 * var(--u)) solid #c9daf3;
  border-radius: calc(18 * var(--u));
  background: linear-gradient(180deg, #ffffff, #e4eefc);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.avatar-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 完整头像（assets/profile/head-*.png），不裁切 */
}

.avatar-option:hover { transform: translateY(calc(-2 * var(--u))); }

.avatar-option:has(input:checked) {
  border-color: #ffae1a;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 174, 26, 0.35), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(200, 120, 0, 0.3);
  transform: scale(1.06);
}

/* 不支持 :has 的浏览器：勾选时给图片加描边作为兜底 */
.avatar-option input:checked + img { outline: calc(3 * var(--u)) solid #ffae1a; outline-offset: calc(-3 * var(--u)); }

.avatar-option input:focus-visible + img { outline: calc(3 * var(--u)) solid #ffd84a; }

/* 注册按钮：与“登录游戏”素材同色系 */
.btn-register {
  position: absolute;
  left: 50%;
  top: calc(318 * var(--u));
  width: calc(300 * var(--u));
  height: calc(70 * var(--u));
  margin-left: calc(-150 * var(--u));
  border: calc(3 * var(--u)) solid #fff1b8;
  border-radius: calc(36 * var(--u));
  background: linear-gradient(180deg, #ffe066 0%, #ffbb1c 55%, #ff9a00 100%);
  box-shadow:
    inset 0 calc(-4 * var(--u)) 0 rgba(210, 110, 0, 0.45),
    0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(190, 110, 0, 0.35);
  color: #fff;
  font-size: calc(30 * var(--u));
  font-weight: 800;
  letter-spacing: calc(4 * var(--u));
  text-shadow:
    0 calc(2 * var(--u)) 0 #c96800,
    0 0 calc(4 * var(--u)) rgba(180, 80, 0, 0.6);
  transition: transform .18s, filter .18s;
}

.btn-register:hover { transform: scale(1.04); filter: brightness(1.06); }
.btn-register:active { transform: scale(.95) translateY(calc(3 * var(--u))); }
.btn-register:disabled { filter: grayscale(.3) brightness(.95); cursor: wait; }

.link-back {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(404 * var(--u));
  text-align: center;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  color: var(--c-blue-text);
}

.link-back:hover { text-decoration: underline; }

/* 其他登录方式暂未开通：隐藏，登录表单下移到面板中间（开通后连同下移一起去掉） */
.divider[hidden], .social-list[hidden] { display: none !important; }
.login-form { transform: translateY(calc(62 * var(--u))); }