.s-char { background:var(--ink-deeper); }
.s-char-img { position:absolute; inset:0; }
.s-char-panel { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,90vw); padding:46px 34px; text-align:center; border:1px solid var(--air-veil); border-radius:8px; background:rgba(26,32,40,.82); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.s-char-panel h2 { color:var(--paper); font:400 30px var(--font-body); }.s-char-panel p { color:var(--air); line-height:1.8; }
.s-char-spinner { width:74px;height:74px;margin:0 auto 22px;border:1px solid var(--light);border-radius:50%;display:grid;place-items:center;color:var(--light);font-size:30px;animation:char-spin 2.4s linear infinite; }
@keyframes char-spin{to{transform:rotate(360deg)}}
.s-char-kicker { color:var(--light)!important; font:14px var(--font-mono); letter-spacing:.14em; }.s-char-avatar{font-size:78px;line-height:1.2;margin:8px 0 4px;filter:drop-shadow(0 0 14px var(--light-halo));}.s-char-summary{margin:6px 0 24px;color:var(--air)!important}.s-char-panel button{border:1px solid var(--light);background:var(--light);color:var(--ink-deep);padding:12px 28px;border-radius:4px;font:16px var(--font-body);cursor:pointer}.s-char-panel button:hover{filter:brightness(1.08)}