/* Character select roster: staggered rows of members on element pedestals over a grey hex floor.
   Sprites come from scripts/build-roster-art.py (1 dot = 2 CSS px). */
.roster-stage{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin:10px 0 16px;padding:18px 4px 30px;background:#a0a4a7 url('ui/roster-bg.png') 0 0/72px auto repeat;image-rendering:pixelated;border-radius:10px;box-shadow:inset 0 0 0 2px #0000001a}
.roster-cell{grid-column:span 2;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin-bottom:-10px;padding:0;border:0;background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.roster-cell:nth-child(8n+5){grid-column:2/span 2}
.roster-bubble{position:relative;z-index:1;width:46px;height:46px;padding:3px;background:#fff;border-radius:8px;box-shadow:0 2px 0 #0003;transition:transform .12s}
.roster-bubble::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.roster-bubble>.portrait-art{width:40px;height:40px;border-radius:5px}
.roster-crown{position:absolute;left:50%;top:-12px;width:27px;height:15px;margin-left:-13.5px;background:url('ui/roster-crown.png') center/100% 100% no-repeat;image-rendering:pixelated}
.roster-element{position:absolute;right:-6px;top:-6px;width:19px;height:19px;border:2px solid #fff;border-radius:50%;font-size:10px;font-style:normal;font-weight:700;line-height:15px;color:#fff;text-align:center;text-shadow:0 1px 0 #0006}
.roster-slot{position:absolute;left:-7px;bottom:-6px;padding:0 4px;border:2px solid #fff;border-radius:9px;background:#3b4c66;font-size:9px;font-style:normal;font-weight:700;line-height:13px;color:#fff}
.roster-stand{position:relative;width:66px;height:66px;margin-top:2px}
.roster-pedestal{position:absolute;left:0;bottom:0;width:66px;height:auto;image-rendering:pixelated}
.roster-stand canvas{position:absolute;left:50%;top:-4px;width:40px;height:40px;margin-left:-20px;image-rendering:pixelated}
.roster-stars{position:absolute;left:50%;bottom:13px;display:flex;padding:2px;background:#2b2d36;border:2px solid #d9dde4;border-radius:3px;box-shadow:0 2px 0 #0005;transform:translateX(-50%)}
.roster-stars i{width:11px;height:9.5px;background:url('ui/roster-star.png') center/100% 100% no-repeat;image-rendering:pixelated}
.roster-cell.current .roster-bubble{outline:3px solid #ffd84a;outline-offset:1px}
.roster-cell:focus-visible{outline:none}.roster-cell:focus-visible .roster-bubble{outline:3px solid #7fdcff;outline-offset:1px}
@media(hover:hover){.roster-cell:hover .roster-bubble{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.roster-bubble{transition:none}}
/* On the roster screen the floor fills the rest of the view down to the nav bar; more members extend it and the hub scrolls. */
#roster-view .roster-stage{flex:1 0 auto;align-content:start;margin-bottom:0;border-radius:10px 10px 0 0}