/* Inset marks keep the eight-card menu within its existing viewport budget. */
.rosterCard{position:relative;border:3px solid #55705c!important;box-shadow:none!important;transition:border-color .12s,box-shadow .12s}
.rosterCard.p1{border-color:#6af4ff!important;box-shadow:0 0 0 2px #092c30,0 0 12px #46e6ef88!important}
.rosterCard.p2{border-color:#ffc35c!important;box-shadow:0 0 0 2px #3b2605,0 0 12px #ffb44388!important}
.rosterCard.p1.p2{border-color:#6af4ff #ffc35c #ffc35c #6af4ff!important}
.rosterCard.p1>span:not(.selectionBadges),.rosterCard.p2>span:not(.selectionBadges){font-weight:900;color:white}
.selectionBadges{position:absolute;top:5px;left:5px;right:5px;display:flex;gap:3px;justify-content:center;pointer-events:none}
.selectionBadges b{font:900 11px/1.2 Arial,sans-serif;padding:4px 6px;border-radius:4px;color:#082529;background:#6af4ff;box-shadow:0 2px 5px #000a}
.selectionBadges .slot2{color:#322006;background:#ffc35c}
.rosterCard:focus-visible{outline:3px solid white;outline-offset:3px}
.sidePicker button.selected{background:#ffed98!important;color:#162917!important;border-color:white!important;box-shadow:0 0 0 2px #ffdf55}

/* Caption badges share a line with the name; portraits remain unobstructed. */
.rosterCaption{display:flex!important;align-items:center;justify-content:center;gap:5px;min-height:23px;padding:2px 1px;flex-wrap:wrap;line-height:1.1}
.rosterName{display:inline!important;white-space:nowrap}
.selectionBadges{position:static!important;inset:auto!important;display:inline-flex!important;flex:none;gap:3px;min-height:0}
.selectionBadges:empty{display:none!important}
.selectionBadges b{font-size:9px;line-height:1.1;padding:3px 4px;box-shadow:none;white-space:nowrap}
.rosterCard img{display:block;margin:0 auto}
@media(max-height:610px){.rosterCaption{gap:3px;min-height:20px}.selectionBadges b{font-size:8px;padding:2px 3px}}