/* Screens B: roster, hero details, recruitment. Prefixes rb- (roster), hd- (hero), rc- (recruit). */
.rb-root{grid-template-columns:minmax(0,1fr) minmax(300px,32%);gap:10px;padding:10px}
.rb-main,.rb-side{min-height:0;min-width:0}.rb-main{overflow:hidden}
.rb-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rb-filters.fams{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.rb-chip{background:var(--ivory);border:3px solid var(--ink);padding:4px 12px;font:italic 800 15px var(--disp);min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;position:relative}
.rb-chip.on{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.rb-search,.rb-sort{font:700 15px var(--body);border:3px solid var(--ink);padding:4px 8px;min-height:44px;background:#fff;min-width:0;flex:1 1 140px}.rb-sort{flex:0 0 auto}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;align-content:start;padding:4px 6px 8px 2px}
.rb-card{background:var(--ivory);border:3px solid var(--ink);padding:0;display:flex;flex-direction:column;text-align:left;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.rb-card.sel{outline:4px solid var(--yellow);outline-offset:-1px;background:#ffe9a0}
.rb-card .pic{position:relative;aspect-ratio:1/1;background:linear-gradient(#2a5bd7,#123a63);overflow:hidden;border-bottom:3px solid var(--ink)}
.rb-card .pic .char{position:absolute;left:50%;top:0;height:230%;width:auto;max-width:none;transform:translateX(-50%)}
.rb-card .pic .token{height:100%;width:100%;min-width:0;min-height:0;left:0;transform:none;border:0;font-size:44px}
.rb-card .rank{position:absolute;left:3px;bottom:3px;background:var(--ink);color:var(--yellow);font:800 11px var(--body);padding:0 4px;letter-spacing:1px}
.rb-card .fam{position:absolute;right:3px;top:3px;background:rgba(9,30,51,.8);border:2px solid var(--ink);border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.pend{position:absolute;right:3px;bottom:3px;background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font:900 13px var(--body)}
.rb-card .nm{display:flex;justify-content:space-between;gap:4px;padding:3px 6px 0;font:italic 800 16px var(--disp)}.rb-card .nm .lv{background:var(--yellow);border:2px solid var(--ink);padding:0 4px;font-size:13px;align-self:center}
.rb-card .bar{margin:3px 6px 0;height:8px}.rb-card .st{display:flex;justify-content:space-between;align-items:center;padding:3px 6px 6px}.rb-card .hp{font:800 12px var(--body)}
.rb-card.injured{box-shadow:3px 3px 0 var(--red)}
.rb-side{overflow-y:auto;gap:8px}.rb-close{display:none;align-self:flex-end}
.rb-stage{position:relative;flex:1 1 220px;min-height:200px;border:3px solid var(--ink);overflow:hidden;display:flex;justify-content:center;align-items:flex-end}
.rb-stage .big,.hd-stage .big,.rc-stage .big{position:relative;height:100%;width:auto;max-width:100%;object-fit:contain;z-index:1}
.rb-stage .token.big,.hd-stage .token.big,.rc-stage .token.big{height:60%;width:50%;font-size:120px}
.rb-stats,.hd-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:#fff;border:2px solid var(--ink);padding:4px;text-align:center}
.rb-stats small,.hd-stats small,.rc-costs small{display:block;font:700 11px var(--body);opacity:.7}.rb-stats b,.hd-stats b{font:italic 900 20px var(--disp)}
/* hero details */
.hd-root{grid-template-columns:minmax(0,1fr) minmax(380px,40%);gap:10px;padding:10px}
.hd-art{position:relative;min-height:0;min-width:0}.hd-stage{position:absolute;inset:0;border:4px solid var(--ink);overflow:hidden;display:flex;justify-content:center;align-items:flex-end;box-shadow:5px 5px 0 rgba(0,0,0,.55)}
.hd-back{position:absolute;left:10px;top:10px;z-index:3}
.hd-side{overflow:hidden;min-width:0}.hd-body{padding:4px 4px 4px 0;display:flex;flex-direction:column;gap:8px;min-height:120px}
.hd-ready{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#fff;border:2px solid var(--ink);padding:6px}.hd-ready .bar{flex:1 1 100px}
.hd-tabs{display:flex;gap:4px}.hd-tabs button{flex:1;min-height:44px;background:#dcd2b8;border:3px solid var(--ink);font:italic 800 15px var(--disp);position:relative}.hd-tabs button.on{background:var(--yellow)}
.hd-skill{display:flex;gap:10px;align-items:flex-start;background:#fff;border:3px solid var(--ink);padding:6px 8px}.hd-skill.ult{border-color:var(--red);background:#fff4dc}
.hd-skill.locked{background:#d9d4c6;opacity:.8}.hd-skill .ic{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--navy2);border:2px solid var(--ink)}
.hd-skill.locked .ic{filter:grayscale(1)}.hd-meta{display:flex;gap:4px;flex-wrap:wrap}.hd-skill .nm{font:italic 900 18px var(--disp)}
.hd-rank{flex:1;text-align:center;border:3px solid var(--ink);background:#d9d4c6;padding:4px;min-width:70px}.hd-rank.done{background:#8fd16f}.hd-rank.cur{background:var(--yellow)}.hd-rank small{display:block}
.hd-ups{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hd-ups.dim{opacity:.6}.hd-up{background:#fff;border:3px solid var(--ink);padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.hd-up .btn{align-self:flex-start;font-size:18px;padding:6px 16px}
/* recruit */
.rc-root{grid-template-columns:minmax(260px,28%) minmax(0,1fr) minmax(320px,34%);gap:10px;padding:10px}
.rc-left,.rc-right{min-height:0;min-width:0;overflow:hidden}.rc-right{overflow-y:auto}
.rc-stage{position:relative;min-height:0;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;border:4px solid var(--ink)}
.rc-list{display:flex;flex-direction:column;gap:6px}.rc-item{display:flex;gap:8px;align-items:center;background:var(--ivory);border:3px solid var(--ink);padding:4px 6px;text-align:left;min-height:56px;flex:none}
.rc-item.sel{background:var(--yellow)}.rc-item .portrait{width:52px;height:52px}
.rc-costs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rc-costs b{font:italic 900 18px var(--disp)}
.rc-req{white-space:normal;text-transform:none;font-size:13px;padding:4px 8px}.rc-why{color:#a01010;font-weight:700}.rc-bio{margin:0;font-size:14px}
.rc-talk{display:flex;flex-direction:column;gap:6px}.balloon{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px;font:italic 600 14px var(--body);position:relative}.balloon.you{background:#bfe6f7;margin-left:18px}
.rc-hist{flex:1}
/* phone */
@media (max-width:820px){
 .rb-root{display:block;overflow:hidden;padding:6px}.rb-main{height:100%}
 .rb-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.rb-filters>*{flex:none}.rb-search{flex:1 0 160px}.rb-main .row.wrap{flex-wrap:wrap}
 .rb-grid{grid-template-columns:repeat(3,1fr);gap:6px}.rb-card .nm{font-size:13px;padding:2px 3px 0}.rb-card .nm .lv{font-size:11px}.rb-card .st{padding:2px 3px 4px}.rb-card .tag{font-size:10px;padding:0 3px}
 .rb-side{position:absolute;left:0;right:0;bottom:0;top:12%;z-index:20;transform:translateY(105%);transition:transform .2s;border-radius:0}
 .rb-root.open .rb-side{transform:none}.rb-close{display:block}.rb-stage{flex:0 0 38%}
 .hd-root{display:block;overflow-y:auto}.hd-art{height:36vh;min-height:220px}.hd-side{overflow:visible;margin-top:8px}.hd-body{overflow:visible}.hd-ups{grid-template-columns:1fr}
 .rc-root{display:flex;flex-direction:column;overflow-y:auto;padding:6px}.rc-stage{flex:none;height:28vh}.rc-left{flex:none;max-height:42vh}.rc-right{flex:none;overflow:visible}
}
.hd-tabs .pend{position:static;display:inline-grid;margin-left:4px;vertical-align:middle}
/* codex */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;align-content:start}.cx-card{background:var(--ivory);border:3px solid var(--ink);padding:3px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px}.cx-card small{font:700 10px var(--body);text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cx-card.sel{background:var(--yellow);outline:3px solid var(--ink)}.cx-card.dark .portrait img,.cx-card.dark .portrait .token{filter:brightness(0) contrast(.8);opacity:.7}
.cx-art{height:200px;display:grid;place-items:center}.cx-art img,.cx-art .token{max-height:200px;width:auto}.cx-detail{overflow:auto}
@media (max-width:820px){#main .screen.scene:has(.cx-grid){grid-template-columns:1fr!important;grid-template-rows:minmax(0,58%) minmax(0,42%)}.cx-f{flex-wrap:nowrap!important;overflow-x:auto;flex:none}.cx-f .btn{flex:none}.cx-art{height:110px}.cx-art img{max-height:110px}.cx-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}}
.cx-card{height:auto;overflow:hidden}.cx-card .portrait{width:100%;height:auto;aspect-ratio:1/1}.cx-card .portrait img,.cx-card .portrait .token{height:230%}
.screen.scene:has(.cx-grid)>.panel{min-width:0}.cx-f{max-width:100%}
.cx-card{content-visibility:auto;contain-intrinsic-size:auto 110px}
.rb-card{min-height:96px}
@media (min-width:821px){.rc-costs,.rc-why,.hd-skill .hint,.rb-card .hp{font-size:14px}}