/* Character identity leads. Flat navy keeps the roster quiet beside illustrated domain cards. */
.roster-card{display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;padding:22px;border:1px solid #a99a784d;border-radius:10px;color:#e6e9f0;text-decoration:none;background:#202735;box-shadow:0 4px 14px #0002;transition:border-color .18s,background-color .18s}
.roster-card:hover{border-color:#d9be7b;background:#252d3c;color:#e6e9f0;text-decoration:none}
.roster-card:focus-visible{outline:3px solid #9ad9ec;outline-offset:4px}
.roster-identity{order:0;display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;min-height:88px;padding-right:56px}
.roster-portrait{height:82px;border:1px solid #a99a7833;border-radius:5px;background:#19212d;display:flex;align-items:center;justify-content:center;overflow:hidden}
.roster-portrait svg{width:46px;height:60px;stroke:#b9ad9588;fill:#a8adb60a;stroke-width:1.3}.roster-portrait span{display:none}
.roster-name h3{font:20px/1.25 Eveleth,sans-serif;color:#f0ede4;letter-spacing:.1px;margin:0 0 8px;overflow-wrap:anywhere}.roster-name p{font:12px/1.45 Overpass,sans-serif;color:#aeb6c3;margin:0}.roster-name p span{padding:0 3px;color:#bba16b}
.roster-header{order:1;display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #b29a6138;min-height:55px}
.roster-emblem{width:32px;height:38px;flex:none;display:flex;align-items:center;justify-content:center}
.roster-emblem img{display:block;width:100%;height:100%}
.roster-emblem.is-multiclass{width:50px;gap:3px}.roster-emblem.is-multiclass img{width:24px;height:32px}
.roster-calling{display:flex;flex-direction:column;gap:3px;min-width:0}
.roster-calling strong{font:15px/1.2 Eveleth,sans-serif;letter-spacing:.3px;color:#ddc58f;overflow-wrap:anywhere}
.roster-calling>span{font:12px/1.35 Overpass,sans-serif;color:#aeb6c3}
.roster-calling.is-multiclass strong{display:flex;flex-wrap:wrap;gap:4px 10px}.roster-calling.is-multiclass strong span{font:inherit;color:inherit}
.roster-level{position:absolute;right:18px;top:22px;width:48px;height:56px;color:#bfc5d5;--sheet-paper:#202735}
.roster-level svg{width:100%;height:100%}.roster-level b{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;font:700 21px/1 Overpass,sans-serif}.roster-level span{position:absolute;bottom:15%;left:0;right:0;text-align:center;font:7px/1 Eveleth,sans-serif;color:#161d2a}
#character-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));align-items:stretch}
@media(max-width:600px){.roster-card{padding:18px}.roster-identity{grid-template-columns:54px minmax(0,1fr);gap:12px;padding-right:48px}.roster-portrait{height:74px}.roster-name h3{font-size:18px}.roster-level{right:14px;top:18px;width:44px;height:52px}}
@media(prefers-reduced-motion:reduce){.roster-card{transition:none}}
body:has(#character-list){background-image:none;background-color:#141b26}
.roster-entry{position:relative;min-width:0;display:flex}
.roster-entry>.roster-card{width:100%;box-sizing:border-box}
.roster-entry .roster-header{padding-right:44px}
.roster-remove{position:absolute;right:16px;bottom:18px;width:40px;height:40px;padding:9px;display:grid;place-items:center;color:#d2dbe7;border:1px solid #66758877;border-radius:6px;background:#1a2330;z-index:1}
.roster-remove:hover{color:#ffd3cb;border-color:#d99286;background:#452c30}
.roster-remove svg{width:19px;height:19px}
.roster-entry.is-draft .roster-header{padding-right:146px}
.creation-draft-badge{position:absolute;right:64px;bottom:18px;height:40px;display:flex;align-items:center;padding:0 10px;border:1px solid #b99b575c;border-radius:5px;background:#302e27;color:#efd493;font:13px Overpass,sans-serif;box-sizing:border-box}
/* Share the same 40px footer alignment for class identity and card actions. */
.roster-entry{--roster-inset:22px}
.roster-entry .roster-header{box-sizing:border-box;min-height:55px;align-items:center}
.roster-entry .roster-emblem{height:40px}
.roster-entry .roster-remove{box-sizing:border-box;bottom:calc(var(--roster-inset) + 1px);height:40px}
.roster-entry .creation-draft-badge{bottom:var(--roster-inset);height:40px}
@media(max-width:600px){.roster-entry{--roster-inset:18px}}