/* ══════════════════════════════════════════════
   CHARACTER CREATION SCREEN
══════════════════════════════════════════════ */
#charscreen{
  display:none;position:fixed;inset:0;z-index:180;
  background:#0c0910;
  background-image:
    radial-gradient(ellipse at 30% 20%,rgba(60,30,120,0.3) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 80%,rgba(30,60,40,0.2) 0%,transparent 55%);
  flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:20px 16px 40px;
}
#charscreen.show{display:flex;}
.char-box{
  width:min(420px,100%);
  animation:loginFadeIn .45s cubic-bezier(0.34,1.2,0.64,1);
}
.char-title{
  font-size:21px;font-weight:700;color:#ead0ff;
  text-align:center;margin-bottom:4px;letter-spacing:.05em;
}
.char-sub{
  font-size:14px;color:rgba(180,150,220,0.4);
  text-align:center;margin-bottom:22px;letter-spacing:.08em;
}
.char-section{
  margin-bottom:18px;
}
.char-label{
  font-size:14px;color:#f59e0b;
  letter-spacing:.1em;margin-bottom:8px;
  border-bottom:1px solid rgba(245,158,11,0.22);padding-bottom:3px;
}
#char-name-input{
  width:100%;background:rgba(255,255,255,0.05);
  border:1px solid rgba(160,110,240,0.3);border-radius:9px;
  color:#ead0ff;padding:11px 14px;font-size:17px;
  font-family:inherit;outline:none;caret-color:#c090ff;
  transition:border-color .15s;
}
#char-name-input:focus{border-color:rgba(200,150,255,0.55);}
#char-name-input::placeholder{color:rgba(160,120,200,0.3);}
.cls-grid{display:flex;flex-direction:column;gap:9px;}
.cls-card{
  background:rgba(255,255,255,0.035);
  border:1.5px solid rgba(120,80,160,0.2);
  border-radius:12px;padding:13px 14px;
  cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:13px;
}
.cls-card:hover{
  background:rgba(120,70,200,0.12);
  border-color:rgba(160,110,240,0.4);
}
.cls-card.selected{
  background:rgba(120,70,200,0.22);
  border-color:rgba(200,150,255,0.65);
  box-shadow:0 0 16px rgba(120,70,200,0.2);
}
.cls-icon{font-size:32px;flex-shrink:0;}
.cls-info{flex:1;}
.cls-name{font-size:17px;font-weight:700;color:#e8d0ff;margin-bottom:3px;}
.cls-desc{font-size:14px;color:rgba(180,150,210,0.55);line-height:1.5;margin-bottom:5px;}
.cls-stats{display:flex;gap:8px;flex-wrap:wrap;}
.cls-stat{
  font-size:12px;padding:2px 7px;border-radius:4px;font-weight:600;
}
.cs-hp{background:rgba(180,40,40,0.2);color:#f07070;}
.cs-mp{background:rgba(40,60,180,0.2);color:#8090e8;}
.cs-ac{background:rgba(40,120,180,0.2);color:#60a8d0;}
.cs-sp{background:rgba(245,158,11,0.15);color:#fbbf24;}
#char-confirm{
  width:100%;margin-top:20px;
  background:linear-gradient(135deg,rgba(100,50,180,0.5),rgba(60,30,120,0.5));
  border:1px solid rgba(160,110,240,0.45);
  border-radius:12px;color:#e0c0ff;
  padding:14px;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:700;
  letter-spacing:.06em;transition:all .2s;
}
#char-confirm:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(120,70,200,0.7),rgba(80,40,160,0.7));
}
#char-confirm:disabled{opacity:.35;cursor:not-allowed;}
#char-err{
  text-align:center;font-size:14px;color:#e07070;
  min-height:18px;margin-top:8px;
}

/* ── 登出按鈕（角色面板底部）── */
.signout-btn{
  display:block;width:100%;margin-top:20px;
  background:rgba(180,40,40,0.14);border:1px solid rgba(200,60,60,0.28);
  border-radius:9px;color:#e07070;padding:10px;
  cursor:pointer;font-family:inherit;font-size:15px;
  transition:background .15s;text-align:center;
}
.signout-btn:hover{background:rgba(180,40,40,0.3);}

/* ══════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════ */
#loginscreen{
  display:none;position:fixed;inset:0;z-index:200;
  background:#0c0910;
  background-image:
    radial-gradient(ellipse at 20% 10%,rgba(80,40,140,0.35) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 90%,rgba(40,80,60,0.25) 0%,transparent 55%);
  flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:24px;
}
#loginscreen.show{display:flex;}
.login-box{
  width:min(340px,100%);
  background:linear-gradient(160deg,rgba(20,10,40,0.97),rgba(10,6,24,0.97));
  border:1px solid rgba(160,110,240,0.3);
  border-radius:20px;padding:36px 28px 28px;
  box-shadow:0 0 60px rgba(80,40,160,0.35);
  animation:loginFadeIn .5s cubic-bezier(0.34,1.2,0.64,1);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.login-rune{font-size:52px;margin-bottom:14px;filter:drop-shadow(0 0 12px rgba(180,120,255,0.5));}
.login-title{
  font-size:23px;font-weight:700;color:#ead0ff;
  margin-bottom:5px;letter-spacing:.05em;text-align:center;
}
.login-sub{
  font-size:15px;color:rgba(180,150,220,0.45);
  margin-bottom:28px;letter-spacing:.08em;text-align:center;
}
.login-divider{
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,110,240,0.25),transparent);
  margin-bottom:24px;
}
#login-status{
  font-size:15px;color:rgba(180,150,220,0.6);
  margin-bottom:18px;text-align:center;min-height:20px;
  transition:color .3s;
}
#login-status.ok{color:#70c090;}
#login-status.err{color:#e07070;}
#loginbtn{
  width:100%;
  background:linear-gradient(135deg,rgba(100,50,180,0.5),rgba(60,30,120,0.5));
  border:1px solid rgba(160,110,240,0.45);
  border-radius:11px;color:#e0c0ff;
  padding:13px 20px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;
  letter-spacing:.06em;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
#loginbtn:hover{background:linear-gradient(135deg,rgba(120,70,200,0.7),rgba(80,40,160,0.7));border-color:rgba(200,150,255,0.6);}
#loginbtn:disabled{opacity:.4;cursor:not-allowed;}
.login-spinner{
  width:18px;height:18px;border:2px solid rgba(200,160,255,0.25);
  border-top-color:#c090ff;border-radius:50%;
  animation:spin .7s linear infinite;display:none;
}
#loginbtn.loading .login-spinner{display:block;}
#loginbtn.loading .login-btn-text{display:none;}
.login-footer{
  margin-top:18px;font-size:14px;
  color:rgba(140,110,180,0.35);text-align:center;line-height:1.6;
}