/* ═══════════════════════════════════
   CHARACTER SELECT
═══════════════════════════════════ */
#screen-charselect{
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(99,102,241,.1),transparent),var(--bg);
  padding-top:80px;
  overflow-y:auto;
}
.charsel-wrap{max-width:920px;margin:0 auto;padding:42px 20px 120px;text-align:center}
.charsel-title{font-size:clamp(24px,4.5vw,38px);font-weight:900;margin-bottom:7px}
.charsel-sub{font-size:13px;color:var(--muted);margin-bottom:46px}

.chars-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  margin-bottom:34px;
}
@media(max-width:640px){.chars-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:380px){.chars-grid{grid-template-columns:repeat(2,1fr)}}

.char-card{
  background:var(--card);border:2px solid var(--border);
  border-radius:22px;padding:20px 10px 16px;
  cursor:pointer;transition:all .28s;position:relative;overflow:hidden;
}
.char-card:hover{
  border-color:rgba(99,102,241,.38);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(99,102,241,.18);
}
.char-card.selected{
  border-color:#3B82F6;
  background:rgba(59,130,246,.07);
  box-shadow:0 0 0 3px rgba(59,130,246,.18),0 18px 44px rgba(59,130,246,.22);
}
.char-card.selected .char-tick{display:flex}
.char-tick{
  display:none;position:absolute;top:10px;left:10px;
  width:22px;height:22px;border-radius:50%;
  background:#3B82F6;color:#fff;font-size:11px;font-weight:900;
  align-items:center;justify-content:center;
  animation:popIn .28s ease both;
}
.char-stage{
  width:90px;height:90px;margin:0 auto 12px;
  position:relative;display:flex;align-items:center;justify-content:center;
}
.char-stage svg{width:90px;height:90px;overflow:visible}
.char-name{font-size:13px;font-weight:900;margin-bottom:3px}
.char-desc{font-size:10.5px;color:var(--muted);line-height:1.65}
.char-tag{
  display:inline-block;margin-top:7px;padding:3px 9px;
  border-radius:20px;font-size:10px;font-weight:800;
  background:rgba(99,102,241,.13);color:var(--indigo);
}

.btn-confirm{
  padding:16px 44px;border-radius:16px;font-family:var(--font);
  font-size:15px;font-weight:900;background:var(--grad);color:#fff;
  border:none;cursor:pointer;
  box-shadow:0 7px 26px rgba(99,102,241,.38);
  transition:all .22s;opacity:.35;pointer-events:none;
  position:sticky;bottom:80px;width:100%;max-width:400px;
  display:block;margin:0 auto;
}
.btn-confirm.ready{opacity:1;pointer-events:all;animation:pulse 2s ease-in-out infinite}
.btn-confirm:hover{transform:translateY(-2px)}