/* Character selection: vertically stacked content/actions; PC and Mobile. */
#mBody:has(.slotlist) { min-width:0; box-sizing:border-box; }
/* Login/register button is inserted dynamically by cloud-account.js */
#mBody:has(.slotlist) #cloudStartButton {
 display:block !important; width:min(100%, 460px) !important; max-width:100%;
 margin:12px auto 14px !important; text-align:center !important;
 box-sizing:border-box; white-space:normal; line-height:1.35;
}
#mBody .slotlist { display:flex !important; flex-direction:column !important; gap:12px !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
/* First row: avatar and details. Second row: buttons. Never overlay details. */
#mBody .slotlist .slotrow {
 display:grid !important;
 grid-template-columns:68px minmax(0,1fr) !important;
 grid-template-rows:auto auto !important;
 column-gap:14px !important; row-gap:12px !important;
 align-items:center !important; width:100% !important; min-width:0 !important;
 height:auto !important; min-height:0 !important;
 padding:16px !important; box-sizing:border-box !important;
 overflow:visible !important;
}
#mBody .slotlist .slotrow > img {
 grid-column:1 !important; grid-row:1 !important;
 width:64px !important; height:76px !important; max-width:100% !important;
 object-fit:contain !important; justify-self:center !important;
}
#mBody .slotlist .slotrow > span {
 grid-column:2 !important; grid-row:1 !important;
 display:block !important; width:auto !important; max-width:100% !important;
 min-width:0 !important; overflow:visible !important;
 white-space:normal !important; overflow-wrap:break-word !important;
 word-break:normal !important; line-height:1.5 !important;
}
#mBody .slotlist .slotrow > span > b { display:block !important; line-height:1.35 !important; margin-bottom:3px !important; white-space:normal !important; }
#mBody .slotlist .slotrow > span > small { display:block !important; white-space:normal !important; line-height:1.5 !important; overflow-wrap:break-word !important; }
#mBody .slotlist .slotrow > button {
 grid-row:2 !important; min-width:0 !important; width:100% !important;
 max-width:none !important; box-sizing:border-box !important; margin:0 !important;
 padding:10px 8px !important; white-space:nowrap !important;
 text-align:center !important; justify-self:stretch !important;
}
/* Place actions side by side within full card width, not on top of labels. */
#mBody .slotlist .slotrow > button:nth-last-child(2) {
 grid-column:1 / 3 !important; grid-row:2 !important;
 width:calc(50% - 6px) !important; justify-self:start !important;
}
#mBody .slotlist .slotrow > button:last-child {
 grid-column:1 / 3 !important; grid-row:2 !important;
 width:calc(50% - 6px) !important; justify-self:end !important;
}
/* Empty slots have one button and do not have an avatar. */
#mBody .slotlist .slotrow.empty > span,
#mBody .slotlist .slotrow.del > span {grid-column:1 / 3 !important; grid-row:1 !important;}
#mBody .slotlist .slotrow.empty > button:last-child {grid-column:1 / 3 !important; width:100% !important; justify-self:stretch !important;}
@media (max-width:620px) {
 #mBody .slotlist { gap:9px !important; }
 #mBody .slotlist .slotrow { grid-template-columns:48px minmax(0,1fr) !important; gap:8px 10px !important; padding:11px !important; }
 #mBody .slotlist .slotrow > img {width:46px !important; height:60px !important;}
 #mBody .slotlist .slotrow > span > b {font-size:16px !important;}
 #mBody .slotlist .slotrow > span > small {font-size:12px !important;}
 #mBody .slotlist .slotrow > button {font-size:13px !important; padding:9px 5px !important;}
 #mBody:has(.slotlist) #cloudStartButton {width:100% !important;}
}